[ webpack4 ] 配置属于自己的打包系统教程（二）—— 资源配置篇

afeichuanqi

2019-06-30

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//加上哈希值来达到去缓存的目的
    })
]

css babel