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

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

因爲篇幅過長分三次發佈，建議按順序看
[ webpack4 ] 配置屬於本身的打包系統教程（一）—— 基礎配置篇
[ webpack4 ] 配置屬於本身的打包系統教程（二）—— 資源配置篇
[ webpack4 ] 配置屬於本身的打包系統教程（最終篇）—— 環境配置篇

資源配置篇

資源配置篇

• 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//加上哈希值來達到去緩存的目的
    })
]