使用webpack构建应用的方法步骤

如何使用webpack

npm init -ynpm install webapck webpack-cli --save-devtouch 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') }};

定义好配置文件后，用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'  })]