webpack的使用以及脱坑集合

分手后的思念是犯贱 2022-06-17 08:39 168阅读 0赞

### 使用process.argv 获取命令行使用的参数 ###

// 判断是否带production参数，production会压缩js
    var isprod = false;
    for (var i in process.argv) {
        if (process.argv[i] === "-p" || process.argv[i] === "--production") {
            isprod = true;
            break;
        }
    }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8

### url-loader 路径不正确，可通过 publicPath进行配置 ###

output: {
            //context: path.resolve(__dirname, 'scripts'),
            path: path.resolve(HTML_DIST_PATH, "assets"),
            publicPath: '/dist/assets/',//当生成的资源文件和站点不在同一地方时需要配置改地址 e.g.：站点在src,资源生成到/src/static/dist，那么publicPath="/static/dist"
            filename: "[name].[hash:6].js",
            chunkFilename: "[id].chunk.js",
        }
     
      
       1
       2
       3
       4
       5
       6
       7
      
     
      
       1
       2
       3
       4
       5
       6
       7

### html-webpack-plugin minify: true 报错，请改成 ###

new HtmlWebpackPlugin({
        title: '',
        template: currentpath,
        filename: currentpath.replace("\\html\\", "\\dist\\"),
        minify: {
            "removeAttributeQuotes": true,
            "removeComments": true,
            "removeEmptyAttributes": true,
        }
        //chunks: ['index', 'vendors'], // 配置该html文件要添加的模块
        inject: 'body'
    })
    
    //extract-text-webpack-plugin 同时使用style-loader和postcss-loader时会报错，将style-loader移除
    ExtractTextPlugin.extract(["css-loader", "postcss-loader"])
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
      
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15

### 完整的配置文件 ###

var fs = require('fs');
    var path = require('path');
    var webpack = require('webpack');
    var HtmlWebpackPlugin = require('html-webpack-plugin'); // 自动写入将引用写入html
    var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); // 提取公共模块
    var ExtractTextPlugin = require("extract-text-webpack-plugin");// 默认的webpack 会将require("style.css")文件嵌入js文件中，使用该插件会将css从js中提取出来
    var CleanWebpackPlugin = require('clean-webpack-plugin'); // 删除文件
    var CopyWebpackPlugin = require('copy-webpack-plugin'); // 拷贝文件
    var BomPlugin = require('webpack-utf8-bom');//将文件转成utf-8 bom格式，解决中文乱码的问题
    var autoprefixer = require('autoprefixer')
    var cssparams = JSON.stringify({ discardComments: { removeAll: false } });
    
    var htmlMinifyOptions = require('./htmlminify.config.js'); //htmlminify的配置参数
    
    
    //定义了一些文件夹的路径
    var ROOT_PATH = path.resolve(__dirname);
    var HTML_ROOT_PATH = path.resolve(__dirname, "html");
    var HTML_SRC_PATH = path.resolve(ROOT_PATH, 'dev');
    var HTML_DIST_PATH = path.resolve(ROOT_PATH, 'dist');
    
    // process.argv 获取命令行使用的参数
    // 判断是否带production参数，production会压缩js
    var isprod = false;
    for (var i in process.argv) {
        if (process.argv[i] === "-p" || process.argv[i] === "--production") {
            isprod = true;
            break;
        }
    }
    
    var config = {
        entry: {
            index: path.resolve(HTML_SRC_PATH, 'index.js'),
            vendors: ['jquery'],
        },
        output: {
            //context: path.resolve(__dirname, 'scripts'),
            path: path.resolve(HTML_DIST_PATH, "assets"),
            publicPath: '/dist/assets/',//当生成的资源文件和站点不在同一地方时需要配置改地址 e.g.：站点在src,资源生成到/src/static/dist，那么publicPath="/static/dist"
            filename: "[name].[hash:6].js",
            chunkFilename: "[id].chunk.js",
        },
        plugins: [
            new ExtractTextPlugin("styles/[name].[contenthash:6].css", { allChunks: false /*是否将分散的css文件合并成一个文件*/ }),
            new CommonsChunkPlugin('vendors', 'vendors.[hash:6].js'),
            new CleanWebpackPlugin(['dist', 'build'], {
                root: ROOT_PATH,
                verbose: true,
                dry: false,
                //exclude: ["dist/1.chunk.js"]
            }),
            //new webpack.optimize.UglifyJsPlugin({ 
            // beautify: true,
            // compress: { warnings: false, },
            // output: { comments: true }
            //}),
            //new BomPlugin(true, /\.(cshtml)$/),//解决cshtml中文乱码的问题
        ],
        module: {
            // 解决动态js url警告错误
            unknownContextRegExp: /$^/,
            unknownContextCritical: false,
    
            // require(expr)
            exprContextRegExp: /$^/,
            exprContextCritical: false,
    
            // require("prefix" + expr + "surfix")
            wrappedContextRegExp: /$^/,
            wrappedContextCritical: false,
            // end
            loaders: [
                { test: require.resolve('jquery'), loader: 'expose?$!expose?jQuery' },// 将jQuery暴露到全局变量中
                {
                    test: /\.css$/,
                    loader: ExtractTextPlugin.extract(["css-loader", "postcss-loader"]) //同时使用style-loader和postcss-loader时会报错，将style-loader移除
                },
                { test: /\.(woff|woff2|eot|ttf|svg)(\?[a-z0-9]+)?$/, loader: 'url-loader?limit=1000&name=styles/fonts/[name].[hash:6].[ext]' }, // 处理图片url
                { test: /\.(png|jpg|gif)(\?[a-z0-9]+)?$/, loader: 'url-loader?limit=1000&name=styles/images/[name].[hash:8].[ext]' }, // 处理图片url limit=1000 小于1kb则生成base64
                //{ test: /\.css$/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] },
                {
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    loader: 'babel', // 'babel-loader' is also a valid name to reference
                    query: {
                        presets: ['es2015']
                    }
                },
                { test: /\.tpl/, loader: 'art-template-loader' },
            ]
        },
        postcss: [autoprefixer()],
        resolve: {
            alias: {
                "datepicker": "jquery-ui/ui/widgets/datepicker",
            }
        }
    };
    // 遍历所有.html文件，使用HtmlWebpackPlugin将资源文件引入html中
    var htmlfiles = fs.readdirSync(HTML_ROOT_PATH);
    htmlfiles.forEach(function (item) { 
        var currentpath = path.join(HTML_ROOT_PATH, item);
        //console.log(currentpath);
        var extname = path.extname(currentpath);
        if (fs.statSync(currentpath).isFile()) {
            //console.log("replace", currentpath.replace("\\html\\", "\\dist\\"))
            config.plugins.push(new HtmlWebpackPlugin({
                title: '',
                template: currentpath,
                filename: currentpath.replace("\\html\\", "\\dist\\"),
                minify: isprod ? htmlMinifyOptions : false, // 生产模式下压缩html文件
                //chunks: ['index', 'vendors'], // 配置该html文件要添加的模块
                inject: 'body'
            }))
        }
    });
    
    module.exports = config;

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack 安装及基本使用及遇到的坑

安装webpack step.1 全局安装webpack $ cnpm install --save-dev webpack -g $ cnpm...

╰+攻爆jí腚メ/ 2024年04月17日 22:02/ 0 赞/ 90 阅读

相关 webpack的使用以及脱坑集合

使用process.argv 获取命令行使用的参数 // 判断是否带production参数，production会压缩js var isprod = f

分手后的思念是犯贱/ 2022年06月17日 08:39/ 0 赞/ 169 阅读

相关 vue脱坑合集（六）——使用 Vuex + axios 发送请求

Vue 原本有一个官方推荐的 ajax 插件 [vue-resource][]，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource 目前主流的

比眉伴天荒/ 2022年06月16日 07:58/ 0 赞/ 218 阅读

相关 angular5+webpack使用Dialog遇到的坑

趁热乎来写一下关于angular5+webpack3使用angular material组件Dialog遇到的坑 1.如果需要【弹出框】交互数据，必须在同一个typeScri

小鱼儿/ 2022年05月31日 03:45/ 0 赞/ 207 阅读

相关 Vue 脱坑记 -——查漏补缺

问题汇总 Q:安装超时(`install timeout`) 方案有这么些: `cnpm` : 国内对npm的镜像版本 / cnpm websit

ゝ一纸荒年。/ 2022年05月30日 03:59/ 0 赞/ 692 阅读

相关新特性Optional的使用，以及集合长度为0的踩坑

使用Java8的新特性Optional，再取属性的时候避免NullPointException，代替判空操作如 return Optional.ofNullab

缺乏、安全感/ 2022年01月26日 03:21/ 0 赞/ 629 阅读

相关 Vue发布过程中遇到坑，以及webpack打包优化

前言这段时间，本人自己做了一个vue画面部署到自己的服务器上，发现运行速度慢的的惊人，虽然服务器很渣（本人没什么钱，只能租最差的服务器，主要是给自己学习用的），但

布满荆棘的人生/ 2021年12月20日 03:03/ 0 赞/ 434 阅读

相关跟大家聊聊计算机实验室的脱坑经历

前文已经说过，你可以提前通过学长学姐咨询实验室的情况，来选择自己心仪的实验室，避免进入自己不喜欢的实验室。那么如果已经不小心进入到了自己不喜欢的实验室怎么办，这里提供一些有用的

布满荆棘的人生/ 2021年11月17日 18:12/ 0 赞/ 367 阅读

相关记录一波webpack使用的坑

最近在学习webpack的使用，遇到一个坑是：在全局安装完webpack之后，再去创建的练习项目中，局部安装webpack。发现不关版本或者怎么试也好，都是 'web

迈不过友情╰/ 2021年11月16日 14:34/ 0 赞/ 255 阅读

相关 webRTC脱坑笔记（一）— 初识webRTC

webRTC概述 [WebRTC][]\--- \`Web browsers with Real-Time Communications (RTC)\` WebRTC是

た入场券/ 2021年10月29日 09:10/ 0 赞/ 331 阅读