webpack3.x基本配置與總結

基本配置

1.開始以前，請肯定你已經安裝了當前 Node 的較新版本。

2.而後在文件夾根目錄下執行如下命令初始化項目並全局安裝webpack：

1.$ cnpm init  // 初始化項目
2.$ cnpm install -g webpack  // 全局安裝webpack
3.$ cnpm install webpack --save-dev  // 當前目錄安裝

3.根目錄下新建配置文件webpack.config.js

4.根目錄下新建dist文件夾以做爲打包後存放目錄

5.根目錄下新建src文件夾以做爲實際項目存放目錄

6.根目錄下新建index.html做爲打包的模板文件

這時整個目錄結構應該是下圖這樣

 

設置打包命令

package.json文件scripts對象下新增

"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"

指定webpack --打包的過程 --打包的模塊 --字體顏色 --打包的緣由

之後打包時候只要運行 cnpm run webpack 就能夠執行上面一長串的命令

 

 

配置webpack.config.js

module.exports = {}對象中一共有4個屬性

 

一.entry: {}打包入口

能夠指定一個或者多個須要打包的js文件，屬性是自定義的name，值是須要打包的js文件。

  entry: {
    main: './src/script/main.js',
    a: './src/script/a.js',
    b: './src/script/b.js',
    c: './src/script/c.js'
  },

二.output: {}打包出口

只可指定一個輸出配置

  output: {
    // 打包後的文件存放的路徑
    path: path.resolve(__dirname, './dist'),
    // 打包後的js文件放到dist/js文件下。須要經過佔位符才能打包爲多個js文件，不然會依次覆蓋文件
    filename: 'js/[name]-[chunkhash].js',
    // 打包後的路徑前面加上動態地址
    publicPath: 'http://cdn.com/'
  },

三.plugins: []

1.使用插件 html-webpack-plugin 自動生成html文件

多配置一次 new htmlWebpackPlugin({}) 就多打包一個html文件（也就是所謂多頁面應用）

使用方法：

$ cnpm install html-webpack-plugin --save-dev

const htmlWebpackPlugin = require('html-webpack-plugin');

    new htmlWebpackPlugin({
      filename: 'a-[chunkhash].html',// 打包後的htmnl文件名      
      template: 'index.html',// 按照根目錄模板文件index.html打包
      inject: 'body',// 指定打包好的<script>標籤插入的位置
      title: 'aaaaa',// title名 能夠在模板中引用
      a: 'bbbb',// 自定義的屬性能夠在根目錄的index.html模板中引用
      minify: { //打包後壓縮
        removeComments: true, // 打包後刪除註釋
        collapseWhitespace: true // 打包後刪除空格
      }, 
      chunks: ['a', 'main'],// 給頁面指定要打包的js模塊
      excludeChunks: ['b', 'c'],// 除了數組裏的js模塊都打包
      inlineSource: '.(js|css)$' //js|css所有內嵌進打包頁面從而減小http請求( 提升加載性能）
    }),

注意上面的inlineSource: '.(js|css)$'功能須要安裝插件 html-webpack-inline-source-plugin

 

2.使用插件 clean-webpack-plugin 每次打包前刪除dist目錄

使用方法：

$ cnpm install clean-webpack-plugin --save-dev

const cleanWebpackPlugin = require('clean-webpack-plugin');

new cleanWebpackPlugin(['dist']), // 參數是要清理的目錄的字符串數組

 

3.使用插件 html-webpack-inline-source-plugin 用script標籤嵌入的方式，減小http請求( 提升加載性能）

使用方法：

$ cnpm install html-webpack-inline-source-plugin --save-dev

const htmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

new htmlWebpackInlineSourcePlugin() // 參數是要清理的目錄的字符串數組

 

四. module: {rules: []} //規定在不一樣模塊被建立時如何處理模塊的規則數組

1. 轉譯js文件

安裝babel-loader

$ cnpm install babel-loader babel-core babel-preset-env webpack --save-dev

打包後若是報錯找不到 babel-template 則安裝 cnpm install babel-template --save-dev

      {// 轉譯js文件
        test: /\.js$/,// 匹配特定文件的正則表達式或正則表達式數組
        include: path.resolve(__dirname, 'src'),// 指定須要轉譯的文件夾
        exclude: path.resolve(__dirname, 'node_modules'),// 指定轉譯時忽略的文件夾        
        use: {
          loader: 'babel-loader', // 依賴的loader
          options: {
            presets: ['env'] // 最新標準
          }
        }
      },

 

2. 轉譯css文件

安裝 css-loader style-loader $ cnpm install css-loader style-loader --save-dev

安裝 postcss-loader $ cnpm install postcss-loader --save-dev

安裝 postcss-import $ cnpm install postcss-import --save-dev //爲一些css自動添加兼容瀏覽器的前綴

      {
        test: /\.css$/,// 匹配特定文件的正則表達式或正則表達式數組
        use: [ // 應用於模塊的 loader 使用列表
          'style-loader',
          'css-loader',
          {
            loader:'postcss-loader', // 兼容一些須要寫前綴的css並壓縮空格
            options: {
              ident: 'postcss',
              plugins: (loader) => [
                require('postcss-import')({ root: loader.resourcePath }),
                require('postcss-cssnext')(),
                require('autoprefixer')(),
                require('cssnano')()
              ]
            }
          }
        ]
      },

 

3. 轉譯less文件

安裝 less $ cnpm install less --save-dev

安裝 less-loader $ cnpm install less-loader --save-dev

      {
        test: /\.less$/,// 匹配特定文件的正則表達式或正則表達式數組
        use: [ // 應用於模塊的 loader 使用列表
          'style-loader',
          'css-loader',
          {
            loader:'postcss-loader', // 兼容一些須要寫前綴的css並壓縮空格
            options: {
              ident: 'postcss',
              plugins: (loader) => [
                require('postcss-import')({ root: loader.resourcePath }),
                require('postcss-cssnext')(),
                require('autoprefixer')(),
                require('cssnano')()
              ]
            }
          },
          'less-loader'
        ]
      },

注意less-loader要放到最前面，處理loader代碼是從use:[]數組右邊開始

 

4. 轉譯sass文件方法同less同樣

安裝 node-sass $ cnpm install node-sass --save-dev

安裝 sass-loader $ cnpm install sass-loader --save-dev

 

5. 轉譯html文件

安裝 html-loader $ cnpm install html-loader --save-dev

      {// 轉譯html文件
        test: /\.html$/,
        use: [
          'html-loader'
        ]
      },

 

6. 轉譯ejs/tpl文件

安裝 ejs-loader $ cnpm install ejs-loader --save-dev

      {// 處理ejs 和 tpl文件 均可以
        test: /\.tpl$/,
        use: [
          'ejs-loader'
        ]
      },

 

7. 處理寫在css中的圖片

安裝 file-loader $ cnpm install file-loader --save-dev

安裝 url-loader $ cnpm install url-loader --save-dev

      {// 處理寫在css中的圖片
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            // 將圖片處理成base64時候使用
            loader: 'url-loader',
            // loader: 'file-loader', 
            options: {
              // 小於2k的圖片處理成64編碼，大於就交給file-loader處理
              limit: 200,
              // 圖片打包後存在assets文件下[名稱]-[5位哈希值].[自身文件類型]
              name: 'assets/[name]-[hash:5].[ext]'
            }
          },
          {// 壓縮圖片 右左順序放到最前面
            loader: 'image-webpack-loader'
          }
        ]
      }

注意：組件中引入圖片必須用這個require方法
<img src="${ require('../../assets/bg.jpg') }">

 

完整配置文件webpack.config.js

const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');
const htmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const path = require('path');
module.exports = {
  entry: {
    main: './src/script/main.js',
    a: './src/script/a.js',
    b: './src/script/b.js',
    c: './src/script/c.js'
  },
  output: {
    // 打包後的文件存放的路徑
    path: path.resolve(__dirname, './dist'),
    // 打包後的js文件放到dist/js文件下。須要經過佔位符才能打包爲多個js文件，不然會依次覆蓋文件
    filename: 'js/[name]-[chunkhash].js',
    publicPath: 'http://cdn.com/'// 打包後的路徑前面加上動態地址
  },
  plugins: [  
    new htmlWebpackPlugin({
      filename: 'a-[chunkhash].html',// 打包後的htmnl文件名      
      template: 'index.html',// 按照根目錄模板文件index.html打包
      inject: 'body',// 指定打包好的<script>標籤插入的位置
      title: 'aaaaa',// title名 能夠在模板中引用
      a: 'bbbb',// 自定義的屬性能夠在根目錄的index.html模板中引用
      minify: { //打包後壓縮
        removeComments: true, // 打包後刪除註釋
        collapseWhitespace: true // 打包後刪除空格
      }, 
      chunks: ['a', 'main'],// 給頁面指定要打包的js模塊
      excludeChunks: ['b', 'c'],// 除了數組裏的js模塊都打包
      inlineSource: '.(js|css)$' //js|css所有內嵌進打包頁面
    }),
    new htmlWebpackPlugin({
      filename: 'b-[chunkhash].html',// 打包後的htmnl文件名      
      template: 'index.html',// 指向根目錄模板文件
      inject: 'body',// 指定<script>標籤插入的位置
      title: 'bbbbbbbb',// title名 能夠在模板中引用
      minify: { //打包後壓縮
        removeComments: true, // 打包後刪除註釋
        collapseWhitespace: true // 刪除空格
      }, 
      chunks: ['b'],// 給頁面指定要打包的js模塊
      excludeChunks: ['a', 'c'],// 除了數組裏的js模塊都打包
      inlineSource: '.(js|css)$' //js|css所有內嵌進打包頁面
    }),
    new htmlWebpackPlugin({
      filename: 'c-[chunkhash].html',// 打包後的htmnl文件名      
      template: 'index.html',// 指向根目錄模板文件
      inject: 'body',// 指定<script>標籤插入的位置
      title: 'ccccccc',// title名 能夠在模板中引用
      minify: { //打包後壓縮
        removeComments: true, // 打包後刪除註釋
        collapseWhitespace: true // 刪除空格
      } 
      chunks: ['c'],// 給頁面指定要打包的js模塊
      excludeChunks: ['a', 'b'],// 除了數組裏的js模塊都打包
      inlineSource: '.(js|css)$' //js|css所有內嵌進打包頁面
    }),

    // 每次打包刪除dist目錄
    new cleanWebpackPlugin(['dist']),// 第一個參數是要清理的目錄的字符串數組
    
    // 把頁面src引入文件的方式，改爲用script標籤嵌入的方式，減小http請求( 提升加載性能）
    new htmlWebpackInlineSourcePlugin()
  ],
  module: {
    rules: [// 用於規定在不一樣模塊被建立時如何處理模塊的規則數組
      {// 轉譯js文件
        test: /\.js$/,// 匹配特定文件的正則表達式或正則表達式數組
        include: path.resolve(__dirname, 'src'),// 指定須要轉譯的文件夾
        exclude: path.resolve(__dirname, 'node_modules'),// 指定轉譯時忽略的文件夾        
        use: {
          loader: 'babel-loader', // 依賴的loader
          options: {
            presets: ['env'] // 最新標準
          }
        }
      },
      {
        test: /\.css$/,// 匹配特定文件的正則表達式或正則表達式數組
        use: [ // 應用於模塊的 loader 使用列表
          'style-loader',
          'css-loader',
          {
            loader:'postcss-loader', // 兼容一些須要寫前綴的css並壓縮空格
            options: {
              ident: 'postcss',
              plugins: (loader) => [
                require('postcss-import')({ root: loader.resourcePath }),
                require('postcss-cssnext')(),
                require('autoprefixer')(),
                require('cssnano')()
              ]
            }
          }
        ]
      },
      {
        test: /\.less$/,// 匹配特定文件的正則表達式或正則表達式數組
        use: [ // 應用於模塊的 loader 使用列表
          'style-loader',
          'css-loader',
          {
            loader:'postcss-loader', // 兼容一些須要寫前綴的css並壓縮空格
            options: {
              ident: 'postcss',
              plugins: (loader) => [
                require('postcss-import')({ root: loader.resourcePath }),
                require('postcss-cssnext')(),
                require('autoprefixer')(),
                require('cssnano')()
              ]
            }
          },
          'less-loader'
        ]
      },
      {// 轉譯html文件
        test: /\.html$/,
        use: [
          'html-loader'
        ]
      },
      {// 轉譯ejs/tpl文件
        test: /\.tpl$/,
        use: [
          'ejs-loader'
        ]
      },
      {// 處理寫在css中的圖片
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            // 將圖片處理成base64時候使用
            loader: 'url-loader',
            // loader: 'file-loader', 
            options: {
              // 小於2k的圖片處理成64編碼，大於就交給file-loader處理
              limit: 200,
              // 圖片打包後存在assets文件下[名稱]-[5位哈希值].[自身文件類型]
              name: 'assets/[name]-[hash:5].[ext]'
            }
          },
          {// 壓縮圖片 右左順序放到最前面
            loader: 'image-webpack-loader'
          }
        ]
      }
    ]
  }
}

 

模塊組成示意圖