开发依赖:devDependencies,开发环境依赖,它里面的包只用于开发环境,不用于生产环境,这些包通常是单元测试或者打包工具等,例如gulp, grunt, webpack, moca, coffee等
生产依赖:dependencies,应用依赖,或者叫做业务依赖,它用于指定应用依赖的外部包,这些依赖是应用发布后正常执行时所需要的,但不包含测试时或者本地打包时所使用的包。
production||development
output: {
path: path.resolve(__dirname, "build"),
publicPath: "/build/",
filename: "index.[chunkhash:8].js"
}
path:
publicPath:
publicPath
设置成相对路径后,相对路径是相对于build之后的index.html的,例如,如果设置publicPath: './dist/'
,则打包后js的引用路径为./dist/main.js
,但是这里有一个问题,相对路径在访问本地时可以,但是如果将静态资源托管到CDN上则访问路径显然不能使用相对路径,但是如果将publicPath
设置成/
,则打包后访问路径为localhost:8080/dist/main.js
,本地无法访问
url根路径
- devServer.contentBase 告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。
- devServer.publicPath 将用于确定应该从哪里提供 bundle,并且此选项优先。
cnpm i -D node-sass sass-loader style-loader
cnpm i -D less less-loader
cnpm i -D postcss-loader autoprefixer
将文件在进行一些处理后(主要是处理文件名和路径、解析文件url),并将文件移动到输出的目录中
一般与file-loader
搭配使用,功能与 file-loader 类似,如果文件小于限制的大小,则会返回 base64 编码,否则使用 file-loader 将文件移动到输出的目录中
cnpm i -D babel-loader @babel/preset-env @babel/core
babel-loader
只会将 ES6/7/8语法转换为ES5语法,但对新api并不会转换 例如(promise、Generator、Set、Maps、Proxy等)。此时我们需要借助babel-polyfill来帮助我们转换。
module.exports = {
entry:["@babel/polyfill",path.resolve(__dirname,'../src/index.js')],// 入口文件
}
npm i -D vue-loader vue-template-compiler vue-style-loader
npm i -S vue
用于解析.vue
文件
vue-template-compiler
用于编译模板
loader用于转换非JavaScript类型的文件,而插件可以用于执行范围更广的任务,包括打包、优化、压缩、搭建服务器等等,功能十分强大。要是用一个插件,一般是先使用npm包管理器进行安装,然后在配置文件中引入,最后将其实例化后传递给plugins数组属性。
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../public/index.html'),
filename: 'index.html'
})//当多入口时,则其中
如果你想拆分为一一对应的多个css文件,我们需要使用到extract-text-webpack-plugin
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本
拆分css mini-css-extract-plugin会将所有的css样式合并为一个css文件 webpack 4.0以前,我们通过extract-text-webpack-plugin插件,把css样式从js文件中提取到单独的css文件中。webpack4.0以后,官方推荐使用mini-css-extract-plugin插件来打包css文件
webpack打包性能可视化插件
devServer:{
port:3000,
hot:true,
contentBase:'../dist' //开发环境输出资源文件目录
},
plugins:[
new Webpack.HotModuleReplacementPlugin()
]
开发环境主要实现的是热更新,不要压缩代码,完整的sourceMap
生产环境主要实现的是压缩代码、提取css文件、合理的sourceMap、分割代码
webpack-merge
合并配置copy-webpack-plugin
拷贝静态资源optimize-css-assets-webpack-plugin
压缩cssuglifyjs-webpack-plugin
压缩js
webpack mode
设置production
的时候会自动压缩js代码。原则上不需要引入uglifyjs-webpack-plugin
进行重复工作。但是optimize-css-assets-webpack-plugin
压缩css的同时会破坏原有的js压缩,所以这里我们引入uglifyjs
进行压缩
构建速度指的是我们每次修改代码后热更新的速度以及发布前打包文件的速度。
mode
可设置development`` production
两个参数,如果没有设置,webpack4
会将 mode
的默认值设置为 production
.production
模式下会进行tree shaking
(去除无用代码)和uglifyjs
(代码压缩混淆)
alias
: 当我们代码中出现import 'vue'
时, webpack会采用向上递归搜索的方式去node_modules
目录下找。为了减少搜索范围我们可以直接告诉webpack去哪个路径下查找。也就是别名(alias
)的配置。include exclude
同样配置include exclude
也可以减少webpack loader
的搜索转换时间。noParse
当我们代码中使用到import jq from 'jquery'
时,webpack
会去解析jq这个库是否有依赖其他的包。但是我们对类似jquery
这类依赖库,一般会认为不会引用其他的包(特殊除外,自行判断)。增加noParse
属性,告诉webpack
不必解析,以此增加打包速度。- extensions webpack会根据extensions定义的后缀查找文件(频率较高的文件类型优先写在前面)
在webpack构建过程中,实际上耗费时间大多数用在loader解析转换以及代码的压缩中。日常开发中我们需要使用Loader对js,css,图片,字体等文件做转换操作,并且转换的文件数据量也是非常大。由于js单线程的特性使得这些转换操作不能并发处理文件,而是需要一个个文件进行处理。HappyPack的基本原理是将这部分任务分解到多个子进程中去并行处理,子进程处理完成后把结果发送到主进程中,从而减少总的构建时间
npm i -D webpack-parallel-uglify-plugin
- Entry:指定webpack开始构建的入口模块,从该模块开始构建并计算出直接或间接依赖的模块或者库
- Output:告诉webpack如何命名输出的文件以及输出的目录
- Loaders:由于webpack只能处理javascript,所以我们需要对一些非js文件处理成webpack能够处理的模块,比如sass文件
- Plugins:
Loaders
将各类型的文件处理成webpack能够处理的模块,plugins
有着很强的能力。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。但也是最复杂的一个。比如对js文件进行压缩优化的UglifyJsPlugin
插件 - Chunk:coding split的产物,我们可以对一些代码打包成一个单独的chunk,比如某些公共模块,去重,更好的利用缓存。或者按需加载某些功能模块,优化加载时间。在webpack3及以前我们都利用
CommonsChunkPlugin
将一些公共代码分割成一个chunk,实现单独加载。在webpack4 中CommonsChunkPlugin
被废弃,使用SplitChunksPlugin