npm init -y npm install webapck webpack-cli --save-dev touch webpack.config.js
在webpack.config.js中下面添加内容
const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') } };
entry：工程资源的入口，可以是单个文件，也可以是多个文件，通过每一个资源入口，webpack会一次去寻找它的依赖进行模块打包。我们可以把entry理解为整个依赖树的根，每个入口都将对应一个最终生成的打包结果。
output：这是一个配置对象，通过它我们可以对最终打包的产物进行配置，这里配置了两个属性，：
path：打包资源放置的路劲，必须为绝对路径。
filename：打包结果的文件名。
定义好配置文件后，用npx webpack或者./node_modules/.bin/webpack执行
使用loader
项目中需要引入一个css文件，如果直接用webpack去执行就会报错，需要再webpack中加入loader机制
module.exports = { ... module: { rules: [ { // 用正则去匹配 .css 结尾的文件，然后需要使用 loader 进行转换 test: /\.css$/, use: ['style-loader', 'css-loader'] } ] } }
编译之前还需要安装style-loader和css-loader
npm install --save-dev style-loader css-laoder
注意：
use属性的值是一个使用loader名称组成的数组，loader执行的顺序是从后往前的，由于loader执行有顺序，故不能写成这样
use: ['css-loader', 'style-loader']
每个loader都可以通过URL queryString的方式传入参数，比如'css-loader?url'
style-loader的原理：是将css的内容使用javascript的字符串存储起来，在网页执行javascript时通过DOM操作，动态地向HTML head标签里插入HTML style标签。
配置loader的方式也可以用Object来实现
use: ['style-loader', { loader: 'css-loader', options: { url: true } }]
使用plugin
loader的作用是被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，插件的范围包括，从打包优化和压缩，一直到重新定义环节中的变量。
如果想要使用一个插件，我们只需要require()它，然后把它添加到plugins数组中。我们可以在一个配置文件中因为不同的目的多次使用用一个插件，因此我们可以使用new操作符来创建它的实列。
上面使用loader把css加载到js中去，现在使用extract-text-webpack-plugin插件把bundle.js文件里的css提取到单独的文件中
// 提取 css 的插件 const ExtractTextPlugin = require('extract-text-webpack-plugin') module: { rules: [ { // 用正则去匹配 .css 结尾的文件，然后需要使用 loader 进行转换 test: /\.css$/, loaders: ExtractTextPlugin.extract({ //转换 .css需要使用的 loader use: ['css-loader'] }) } ] }, plugins: [ //从 js 文件中提取出来的 .css 文件名称 new ExtractTextPlugin({ filename: 'main.css' }) ]
编译之前需要安装extract-text-webpack-plugin
npm install --save-dev extract-text-webpack-plugin
执行webpack时报错需要这样安装
npm install extract-text-webpack-plugin@next
DevServer
安装
npm install webpack-dev-server --save-dev
然后进行简单的配置
devServer:{ port: 3000, publicPath: "/dist" }
然后用./node_modules/.bin/webpack-dev-server执行
资源压缩
npm i uglifyJSPlugin-webpack-plugin --save-dev
配置文件
const UglifyJSPlugin = require('uglifyjs-webpack-plugin') plugins: [ new UglifyJSPlugin({ //默认是 false 需要手动开启 parallel: true }) ]
或者
optimization: { minimizer: [new UglifyJsPlugin()], },
按需加载
在代码层面，webpack支持两种方式进行异步模块加载，一种是CommonJS形式的require.ensure，一种是ES6 Module形式的异步import()
异步加载的脚本不允许使用document.write，所以将module.js的代码改成console.log
export const log = function(){ console.log('module.js loaded.') }
编辑app.js，将module.js以异步的形式加载进来
import('./module.js').then(module =>{ module.log() }).catch(error => "An error occurred while loading the module") document.write('app.js loaded.')
修改配置
module.exports = { mode: "production", entry: './app.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), publicPath: "./dist" }, }
这里我们在output中添加了一个配置项publicPath，它是webpack中一个很重要有很容易引起迷惑的配置，当我们的工程中有按需加载以及图片和文件等外部资源时，就需要它来配置这些资源的路径，否则页面上就会报404，这里我们将publicPath配置为相对于html的路径，使按需加载的资源生产在dist目录下，并且能正确地引用到它。