一、基本概念
Webpack是一个模块打包器,通过构建一个依赖关系图,将所有需要的资源打包成一个或多个bundle文件,提供给浏览器使用。其中模块可以是JavaScript文件、CSS文件、图片等等任何形式的资源。
Webpack的核心是一些如loader、plugin等的插件模块,可以进行预处理、压缩、转换、跨域等等各种复杂的操作。
二、使用步骤
1. 安装webpack和webpack-cli
npm install webpack webpack-cli --save-dev
2. 编写webpack.config.js文件
module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] } };
3. 运行webpack打包
npx webpack
三、devtool
devtool属性可以控制打包后的代码的调试工具,是调试时一个非常重要的参数。
1. source-map
生成一个source-map文件,可以在浏览器中直接进行调试,打包时速度会比较慢。
module.exports = { devtool: 'source-map' };
2. cheap-source-map
生成一个压缩之后的source-map文件,速度比较快。
module.exports = { devtool: 'cheap-source-map' };
3. eval-source-map
生成一个source-map code URL,速度最快,但是可能有安全问题。
module.exports = { devtool: 'eval-source-map' };
四、loader和plugin
1. loader
通过loader模块,我们可以对各种类型的文件进行处理。比如对于CSS文件,我们可以使用css-loader进行处理,将其转化为JavaScript代码,再使用style-loader插入到html中。
module.exports = { module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] } };
2. plugin
Plugin在Webpack构建过程中会广泛应用,一个Plugin的功能往往会涉及到Webpack自身的多个生命周期。比如,我们可以用uglifyjs-webpack-plugin来进行代码压缩。
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { plugins: [ new UglifyJsPlugin() ] };
五、代码分离
Webpack可以将代码分成多个块,每一个块被打成一个文件。
1. entry
在entry中配置多个入口,每个入口都会生成一个chunk。
module.exports = { entry: { app: './src/app.js', vendor: './src/vendor.js' }, output: { filename: '[name].js', path: __dirname + '/dist' } };
2. optimization.splitChunks
通过optimization.splitChunks配置可以实现更高级的代码分离。具体来说,它可以将多个入口chunk中的公共部分提取出来,生成一个单独的chunk文件。
module.exports = { optimization: { splitChunks: { chunks: 'async' } } };
六、Hot Module Replacement
Hot Module Replacement可以在不刷新浏览器的情况下,自动替换页面上的已经被修改的模块。
const webpack = require('webpack'); module.exports = { devServer: { hot: true, contentBase: './dist' }, plugins: [ new webpack.HotModuleReplacementPlugin() ] };
七、结语
Webpack3是一个非常强大的模块打包工具,通过熟练掌握Webpack3的各种配置、loader、plugin等模块,可以轻松构建出高质量的前端项目。