[ webpack4 ] 配置屬於自己的打包系統教程（二）—— 資源配置篇

yhtx1997發表於2019-01-03
Web

GitHub 完整配置檔案地址： https://github.com/yhtx1997/webpack4-Instance

由於篇幅過長分三次釋出，建議按順序看

資源配置篇

資源配置篇

  • ES6 -> ES5
  • 提取 css 到單獨檔案
  • css 瀏覽器相容字首補全
  • css 程式碼壓縮
  • 使用 sass
  • 使用 HTML 模板
  • 清理舊的打包檔案

靜態資源載入與解析

通過下面的配置
可以在 js 裡引入相應的檔案，然後進行解析
也可以直接解析相應的檔案

配置 babel 將 ES6 轉換為相容性語法（低版本語法 ES5 或 ES3）

安裝 babel-loader

npm install -D babel-loader @babel/core @babel/preset-env 
複製程式碼
  • babel-loader：使用 Babel 轉換 JavaScript 依賴關係的 Webpack 載入器
  • @babel/core： 將 ES6 程式碼轉換為 ES5
  • @babel/preset-env： 決定使用哪些 api 為舊瀏覽器提供現代瀏覽器的新特性
module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}
複製程式碼

載入 css

安裝提取 css 相關的 npm 包

npm install style-loader css-loader -D
複製程式碼

提取 css 相關配置

const path = require('path');

module.exports = {
    entry: {
        2048: './src/js/2048.js',
        1024: './src/js/1024.js',
        512: './src/js/512.js'
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
           {
             test: /\.css$/, //匹配所有以 .css 為字尾的檔案
             use: [//使用以下loader來載入
               'style-loader', 
               'css-loader'
             ]
           }
        ]
    }
}
複製程式碼

安裝 sass

開發 css 現在多數使用 sass 和 lass ，所以配置下 sass
相應的安裝 lass 只需要把 sass-loader 切換為 less-loader

npm install sass-loader node-sass -D
複製程式碼

配置

{
    test: /\.scss$/,
    use: [
        "style-loader",
        "css-loader",
        "sass-loader" 
    ]
}
複製程式碼

CSS 分離成檔案

方案一 安裝 extract-text-webpack-plugin

方案一簡單寫下，推薦方案二

npm install extract-text-webpack-plugin -D
複製程式碼
  • extract-text-webpack-plugin 提取 css 到單獨檔案 配置
const ExtractTextPlugin = require("extract-text-webpack-plugin");

plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
        title:'2048',
        template: './src/index.html',
        minify:true,
        hash:true
    }),
    new ExtractTextPlugin({
        filename: 'css/[name].css'
    }),
],
module: {
    rules: [
       {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
              fallback: "style-loader",
              use: ["css-loader","sass-loader"]
            })
      },
    ]
}
複製程式碼
方案二 安裝 MiniCssExtractPlugin 推薦

與extract-text-webpack-plugin相比

  • 非同步載入
  • 沒有重複的編譯（效能）
  • 更容易使用
  • 特定於CSS
npm install mini-css-extract-plugin postcss-loader autoprefixer postcss optimize-css-assets-webpack-plugin -D
複製程式碼
  • mini-css-extract-plugin 提取 css 到單獨檔案
  • autoprefixer 瀏覽器相容字首補全（例如 -webkit-）
  • optimize-css-assets-webpack-plugin 程式碼壓縮 配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true // set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
        title:'2048',
        template: './src/index.html',
        minify:true,
        hash:true
    }),
    new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "css/[name].css"
    })
],

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader',
                'sass-loader',
            ]
          },
    ]
    
}
複製程式碼

這裡需要注意的是需要新建一個 postcss.config.js 檔案,用來配置自動加字首

module.exports={
    plugins: [
        require('autoprefixer')({ /* ...options */ })
    ]
}
複製程式碼

載入資料

資料檔案包括 JSON 檔案，CSV、TSV 和 XML
JSON 預設就是支援的，所以如果需要處理剩下的使用下面的方法就可以了

安裝提取 資料 相關的 npm 包

npm install csv-loader xml-loader -D
複製程式碼

安裝提取 資料 相關的 npm 包

{
    test: /\.(csv|tsv)$/,
    use: [
    'csv-loader'
    ]
},
{
    test: /\.xml$/,
    use: [
    'xml-loader'
    ]
}
複製程式碼

載入其他資源

載入其他靜態資源都可以使用 file-loader 來載入

npm install file-loader -D
複製程式碼

載入圖片

{
    test: /\.(png|svg|jpg|gif)$/,
    use: [
        'file-loader'
    ]
}
複製程式碼

載入字型

{
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: [
    'file-loader'
    ]
}
複製程式碼

設定 HtmlWebpackPlugin

當我們真正應用我們寫的程式碼時，需要我們新建 HTML ，並且需要我們手動的在 HTML 裡引入，使用 HtmlWebpackPlugin 可以讓我們不用每次都新建 HTML 以及 手動去引入我們的程式碼

它會幫我們每次執行 webpack 時新建一個 HTML 並引入所有打包好的 js css

安裝

npm install html-webpack-plugin -D
複製程式碼

配置 HTML 模板

const HtmlWebpackPlugin = require('html-webpack-plugin');//引入HtmlWebpackPlugin

//官網是將其放到了入口 entry 與出口 output 之間
plugins: [
    new HtmlWebpackPlugin({
        title: 'Output Management'，//表示 HTML title 標籤的內容 
        template: './src/index.html',//表示模板路徑
        minify: true,//壓縮程式碼
        hash: true//加上雜湊值來達到去快取的目的
    })
]
複製程式碼

清理 ./dist 資料夾

如果我們使用了雜湊值來命名我們的檔案，那麼每次更該內容都會生成新的檔案，同時舊的檔案依然存在，這樣的話一個是亂，一個是浪費

我們可以使用 CleanWebpackPlugin 在每次打包時都會將之前的舊檔案清除掉

安裝

npm install clean-webpack-plugin -D
複製程式碼

配置

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

plugins: [
    new CleanWebpackPlugin(['dist']),//刪除dist
     new HtmlWebpackPlugin({
        title: 'Output Management'，//表示 HTML title 標籤的內容 
        template: './src/index.html',//表示模板路徑
        minify: true,//壓縮程式碼
        hash: true//加上雜湊值來達到去快取的目的
    })
]
複製程式碼

相關文章