Webpack，web：网络，pack：打包

webpack.wuhaolin.cn是一个介绍webpack的网站，这个网站的优势是每节内容都有对应的源码，内容也容易理解，学习成本低，第1章是大致给你介绍一下webpack，后面内容是具体细化

学习这个网站的webpack内容时，先翻到每节底部，如果有源码，先下载源码，然后看这节的内容，最后安装需要的npm包，记住，我们的包的版本要跟网站上提供的源码里的版本一致，否则可能会报错

webpack报错原因主要是版本不兼容

webpack3.8.1在遇到css-loader?minimize会报错，需要去掉?minimize；而webpack3.4.0不会报错

extract-text-webpack-plugin，这个插件在webpack4中不支持

如果你用的是webstorm进行开发，要在项目里安装node_modules了，要给node_modules的外面一层文件夹右键--》Mark Directory As--》Excluded，如果不做这一步的话，电脑会卡死

安装webpack-dev-server以后，即使是全局安装，仍然不能使用webpack-dev-server命令，会报错：“The CLI moved into a separate package: webpack-cli      Please install 'webpack-cli' in addition to webpack itself to use the CLI  -> When using npm: npm i -D webpack-cli”，就按照报错信息来，运行npm i -D webpack-cli来安装webpack-cli，但是推荐用cnpm，因为速度更快，但是安装以后再运行‘webpack-dev-server’，报了另外一个错误：“throw new Error('invalid "instanceof" keyword value ' + c)”，最后我下载了1.6节页面最底部的源码，删除node_modules，用网站的源码，然后cnpm install以后，就正常运行了

1.6节说让你执行‘webpack-dev-server’，你不要直接在cmd命令行上执行‘webpack-dev-server’，要要把命令行放在package.json的

"scripts": {

    "build": "webpack-dev-server --hot --devtool source-map"

  }里，运行cnpm run build

构建完毕以后，出现的.map后缀名的文件，就是sourcemap文件

entry: ['./main.js', './branch.js']，entry如果是一个数组，里面有2个js，就会从左往右执行

安装node-sass以后，不能直接执行‘node-sass main.scss main.css’，要把‘node-sass main.scss main.css’放在npm script里（比如"node-sass" : "node-sass main.scss main.css"），再执行‘cnpm run node-sass’就可以了

问：怎么记忆css-loader/style-loader呢？

答：css-loader的核心是css，也就是处理css代码的；style-loader的核心是style，是把css插入到<style>标签里的

devtoolModuleFilenameTemplate：

如果想提升项目的性能，可以在webpack.config.js里module.exports下面设置performance: {

    hints: 'warning'

  }，这样，控制台会输入一些帮助你提高性能的建议：

问：哪些插件适合全局安装？

答：希望整个电脑的版本都一致的，就全局安装，比如node-sass；如果项目1里需要用这个版本，项目2需要用另外一个版本，那么这个插件就适合局部安装，比如webpack

问：哪些模块安装时调用‘-S’，哪些模块安装时调用‘-D’？

答：‘-S’是把插件放到package.json的dependencies里，‘-D’是把插件放在package.json的devDependencies里，dependencies放生产环境需要的插件（比如Vue），devDependencies放只需要开发环境需要而生产环境不需要的插件（比如babel-core）

问：复制网上的一句命令‘npm install –save-dev sass-loader node-sass’，返回给我cnpm的版本，这是怎么回事？

答：原来是–save-dev前面需要2个‘-’，改成‘npm install -–save-dev sass-loader node-sass’

�运行‘cnpm install sass-loader node-sass -S’报错，然后换成‘cnpm i -D node-sass sass-loader’就安装成功了，我猜测可能是因为sass-loader依赖node-sass，所以如果前后顺序换了就安装失败了，应该不是‘-S’改成‘-D’所以成功的

在main.js里使用require('style-loader!css-loader?minimize!./main.css');，再在webpack.config.js的module.rules的css文件use: ExtractTextPlugin.extract({

                    // 转换 .css 文件需要使用的 Loader

                    use: ['css-loader'],

                }),

会生成css文件，但是后面会报错，

把require('style-loader!css-loader?minimize!./main.css');改成require('./main.css');就不报错了，估计是require里用了一种方式处理css文件，另外又用了一种loader进行处理，2种方式同时使用会冲突

如果entry是一个对象，里面有2个入口，那么，output不能放在同一个文件里，也就是说，output里的filename不能写死，比如如果写死为'bundle.js'，会报错：Conflict: Multiple assets emit to the same filename bundle.js

页面里写require('vue')；node就会去node_modules里找vue

问：为什么webpack.config.js和index.html修改了内容，项目监测不到？

答：http://webpack.wuhaolin.cn/2%E9%85%8D%E7%BD%AE/2-1Entry.html讲到了‘entry是配置模块的入口，可抽象成输入，Webpack 执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块。’而mian.js是找不到webpack.config.js和index.html的，所以这2给文件即使修改了，页面也不会更新

问：3.9节的demo里有这句npm script‘"build": "NODE_ENV=production webpack"’，结果报错了‘'NODE_ENV' 不是内部或外部命令，也不是可运行的程序 或批处理文件。’，怎么解决？

答：改成‘"build": "set NODE_ENV=production && webpack"’，原文链接：https://www.jianshu.com/p/d0ea266c8e14

/\.jsx?$/，这表示匹配js的后缀文件或者jsx的后缀文件

关于‘4-1 缩小文件搜索范围’的‘优化 loader 配置’的这个示例，我的理解是：减少文件夹层数，这样可以减少让node所检查的文件的嵌套层数，类似于js的for循环层数减少了，性能就提高了

3.15节这里出现了‘rsync dist’，以下是我从http://bbs.chinaunix.net/thread-3681210-1-1.html里摘录的一段话："rsync是linux系统默认带有的命令，window下没有的。要在windows上安装rsync还挺麻烦，需要用到cygwin 之类的在windows上模拟linux环境才能安装rsync吧"，实际开发项目里，可以直接把dist文件夹放在服务器上就行了，不用这么麻烦

关于3.16这节内容，我觉得webstorm已经可以对代码进行语法检查了，就没有必要再安装这些插件了

问：3.19这节，在template.html这里引入图片，即使用了file-loader进行解析，还是没有效果，为什么？

答：因为main.js获取不到template.html的代码，如果想在html里让图片被插件解析，可以在js里引入图片，然后把图片插入到html里

问：3.19这节的demo里，webpack.config.js里new WebPlugin的requires的值为什么是['main']？

答：因为entry的值是一个对象，属性名就是'main'，你也可以根据自己喜好改成其他值，但是entry值的属性名必须和new WebPlugin的requires值相同

问：为什么template.html里的script标签的src属性值是app？

答：因为webpack.config.js里的这句话，

entry: {

    app: './main.js'// app 的 JavaScript 执行入口文件

  },

如果你把这里的app改成app2，就需要把template.html里的script标签的src属性值改成app2了

package.json的dependencies和devDependencies是按照英文字母的顺序进行排序的，如果想详细了解package.json文件中dependencies和devDependencies的区别，请阅读：https://www.cnblogs.com/xumqfaith/p/8073035.html

vue-router按需加载组件的3种方式：vue异步组件、es提案的import()、webpack的require.ensure()：https://segmentfault.com/a/1190000011519350