如何使用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'  })]