webpack简单配置

通过exclude排除掉不相关的js文件可以一定程度优化打包过程

配置热更新：devServer:{hot:true}

如果我们要处理jsx语法 则需要在loader中加个预设 preset

以下写法仅适用webpack version4.0以下

同时需要npm i webpack-preset-react -D

在webpack要引入插件 需要使用到require（）  但是还是需要先npm i 插件，然后在plugins数组中new出即可

配置sass-loader  需要npm i sass-loader rode-loader

使用模块化之后就可以像引入js一样

上图的localIdentName是指显示在浏览器时的名字

import A from  '..sass' 然后A.xxx

 

------------------------------------------------------------------------------------------

对于webpack 打包压缩vue项目报错：unexpected punc (()的  这说webpack原带的uglifyjs不支持对es6的打包

解决办法是在webpack-prod.config.js中注释掉原来的new webpack.optimize.UglifyJsPlugin({})

然后const UglifyJsPlugin = require('uglifyjs-webpack-plugin');【要提前npm i uglifyjs-webpack-plugin -D】

接着配置new UglifyJsPlugin({
            // 使用外部引入的新版本的js压缩工具
            parallel: true,
            uglifyOptions: {
                ie8: false,
                ecma: 6,
                warnings: false,
                mangle: true,
                // debug false
                output: {
                    comments: false,
                    beautify: false,
                    // debug true
                },
                compress: {
                    // 在UglifyJs删除没有用到的代码时不输出警告
                    warnings: false,
                    // 删除所有的 `console` 语句
                    // 还可以兼容ie浏览器
                    drop_console:true,
                    // 内嵌定义了但是只用到一次的变量
                    collapse_vars:true,
                    // 提取出出现多次但是没有定义成变量去引用的静态值
                    reduce_vars:true,
                }
            }
        }),

如果项目文件大的话 最好不要配置过多的参数。否则打包速度会很慢的

最后在需要npm i webpack-cli 以及babel等需要在webpack.base.config.js中设置相应的loader和options如

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')],
        options:{
                presets:["es2015"]
              },
              exclude:[/node_modules/]
      },

优化webpack:可以参考：https://www.jianshu.com/p/7f48a21d8c5e

var UglifyJsPlugin = require('uglifyjs-webpack-plugin');//可以压缩es6代码

var ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')//多进程执行压缩任务，更快但不支持es6代码的打包

当然我们也可以使用webpack提供的其他优化插件  比如HappyPack

 

出现报错：ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory'

具体的配置过程可以参考：https://www.cnblogs.com/cangqinglang/p/8964460.html