webpack

https://doc.webpack-china.org/

http://www.css88.com/doc/webpack/

1.uglifyjsplugin

使用IE8 加载webpack 打包压缩后的代码时，会出现类似'undefined' 为空或不是对象的错误。

在进行简单的调试后，造成错误的原因是变量指向被改变了，表象是：压缩后的变量le原本是指向jQuery对象的，但在运行时却找不到jQuery对象下的属性或方法导致出错。

由于压缩后的代码比较难理清，所以，也找不到到底是哪段代码造成了变量覆盖问题。

对UglifyJS 进行了一下研究，大概确定是mangle阶段出了问题，貌似是做变量名混淆的。而在相关的选项中，有一个选项比较相关：--screw-ie8。

查找了一下该选项的意义，看到有以下一段提交记录：

Regardless of the --screw-ie setting, the names will not be leaked.
Code relying on the IE bug will not work properly after mangling.

Without --screw-ie: a hack has been added to the mangler to avoid
using the same name for a function expression and some other variable in
the same scope. This keeps legit code working, at the (negligible,
indeed) cost of one more identifier.

With --screw-ie you allow the mangler to name function expressions
with the same identifier as another variable in scope. After mangling
code might break in IE<9.

其中--screw-ie后来改名为--screw-ie8，大致上是对IE8 下带名字的函数表达式（Named Function Expression, NFE）做了一下hack。

IE8 的JS 引擎对NFE 有以下bug：JScript NFE bugs。简单理解就是，IE8 下NFE 会在作用域内声明并初始化一个变量，该变量名为函数表达式的名，值为该函数表达式。而这种行为在标准的Javascript 语法中是不存在的。

当UglifyJS 在mangle阶段，若发现--screw-ie8参数为false，则尝试绕开这些bug，使函数表达式的名字不会与作用域中其他变量名冲突。

而在UglifyJS ~v2.7.0后，参数--screw-ie8就默认为true了，即，如果不显式声明参数为false，则mangle的结果很可能造成NFE变量覆盖了作用域内的同名变量。提交历史：Enable --screw-ie8 by default。

解决方法;

new webpack.optimize.UglifyJsPlugin(

{

　　compress: { warnings: false, screw_ie8 : false },

　　mangle: { screw_ie8: false },

　　 output: { screw_ie8: false }

})

 webpack配置jquery

1.第一种，页面直接引用jquery

const loaders = {
    jqueryLoader:[
        {
            loader: 'expose-loader',
            options: '$'
        },{
            loader: 'expose-loader',
            options: 'jQuery'
        }
    ]
}
module:{
   rules:[{ 
      test: require.resolve('jquery'),
      use: loaders.jqueryLoader
    }],
    externals: {
      jquery: 'jQuery'
    },
}

2.第二种，package.json中下载jquery

entry = {
      'vendor': ['jquery']
}

new webpack.ProvidePlugin({
      '$': 'jquery',
      'jQuery': 'jquery'
})

 npm不是全局安装，script配置如下

"start": "./node_modules/.bin/anywhere",

　　

 webpack 4.0

升级了webpack之后，好多配置和之前不一样了，下面总结一下

1.运行webpack后，要求装webpack-cli或者webpack-command

因为4.0之前的webpack里面包含了webpack-cli，所以之前不用装，但是我装了webpack-cli -D之后，还是报错，于是全局装了一下webpack-cli -g,还是不行，直接把script里面的webapck改成了webpack-cli

然后又报其他的错，但是可以打包了，之后解决完其他的错误，再把script中的webpack-cli改为webpack就可以正常打包了

2.webpack.optimize.UglifyJsPlugin has been removed，please use config.optimization.minimize instead.

 在webpack4.0版本中已经废弃了之前 UglifyJsPlugin的用法，用的是config.minimize

解决方法

1. 用npm安装uglifyjs-webpack-plugin插件;
2. 将其引入：var uglifyjsPlugin=require('uglifyjs-webpack-plugin');
3. 删除以前的写法，将optimization的JS压缩与plugins并排写在一起，注意，是并排，而不是像以前一样写在plugins里面

var UglifyJsPlugin=require('uglifyjs-webpack-plugin');

//压缩js
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: false
                }
            })
        ]
    },

　　optimization是和plugin同级的

3.webpack.optimize.CommonsChunkPlugin到config.optimization.splitChunk

. 

//optimization与entry/plugins同级
optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    },

4.  使用了extract-text-webpack-plugin插件后，编译出错，信息如下，求讲解

(node:9624) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

(node:9624) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

C:\Users\zsl08.000\Desktop\Vue-Webpack-todo\node_modules\webpack\lib\Chunk.js:460

                throw new Error(

                ^

 

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

解决方法：换成 mini-css-extract-plugin，配置如下

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  }
}

5.vueLoaderPlugin报错，执行了webpack之后，报错如下

ERROR in ./app.vue?vue&type=style&index=0&id=381730fa&scoped=true&lang=css
Module parse failed: Unexpected token (14:3)
You may need an appropriate loader to handle this file type.
|
|
| div{
|       font-size: 25px;
|       letter-spacing: 3px;
 @ ./app.vue 4:0-86
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./main

ERROR in ./app.vue?vue&type=template&id=381730fa&scoped=true
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
|
| <div>Hello,{{name}}</div>
|
 @ ./app.vue 1:0-93 11:2-8 12:2-17
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./main

ERROR in ./app.vue
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
 @ ./main.js 7:11-31
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./main

ERROR in ./app.vue?vue&type=template&id=381730fa&scoped=true
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
 @ ./app.vue 1:0-93 11:2-8 12:2-17
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./main

ERROR in ./app.vue?vue&type=script&lang=js
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
 @ ./app.vue 2:0-54 3:0-49 3:0-49 10:2-8
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./main

ERROR in ./app.vue?vue&type=style&index=0&id=381730fa&scoped=true&lang=css
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
 @ ./app.vue 4:0-86
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./main

　　解决方法：

var { VueLoaderPlugin } = require('vue-loader');
var config = {
    entry : {
        main : "./main"
    },
    output : {
        path : path.join(__dirname, './dist'),
        publicPath : '/dist/',
        filename : 'main.js'
    },
    module : {
        rules : [
            {
                test : /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: 'css-loader',
                            fallback: 'vue-style-loader'
                        })
                    }
                }
            },
            {
                test : /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test : /\.css$/,
                use : ExtractTextPlugin.extract({
                    use : 'css-loader',
                    fallback: 'style-loader'
                })
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new ExtractTextPlugin("main.css")
    ]
};

 

6.The 'mode' option has not been set, webpack will fallback to  'production' for this value  

这是运行webpack之后的警告

解决方法：

在package.json中增加配置项

"scripts": {
    "start": " --mode development",
    "build": "--mode production",
  }

 

//压缩js optimization: { minimizer: [ new UglifyJsPlugin({ uglifyOptions: { compress: false } }) ] },