從零開始梳理webpack4

目錄

新建Demo

安裝依賴

webpack相關

js相關

css相關

file相關

template相關

配置文件

config/webpack.base.js

config/webpack.prod.js

config/webpack.dev.js

.babelrc

postcss.config.js

---

webpack團隊實在是任性，動不動就大改，改完了還得重學。。。廢話不多說，開搞

新建Demo

如何新建一個工程demo，請參考之前2篇文章：

原 從零搭建前端開發環境（零）——基礎篇：1.npm、git及項目初始化

原 從零搭建前端開發環境（零）——基礎篇：2.webpack生產與開發環境配置

安裝依賴

注：點擊部分模塊名可直接跳到文檔

webpack相關

npm i -D webpack webpack-cli webpack-merge

• webpack/webpack-cli：不必說太多，webpack4推薦安裝webpack-cli，至於爲什麼，看文檔吧，反正webpack對此是apologize的
• webpack-merge：方便把dev和prod的config文件拆分，主要是方便管理

js相關

npm i -D babel-core babel-loader babel-preset-env babel-preset-stage-0

• babel-core/babel-loader：babel的核心模塊和loader，安裝時注意版本！！注意版本！！注意版本！！點擊看文檔
• babel-preset-env：es6編譯成es5
• babel-preset-stage-0：增加一些stage0的語法需求，這個可選 

css相關

npm i -D css-loader less less-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin style-loader postcss-import postcss-loader postcss-preset-env

• less/less-loader/css-loader：解釋略
• style-loader：這個主要是把css打到js裏
• postcss-loader：爲css加瀏覽器適配前綴，如-webkit-，-ms-等
• postcss-import：可以在css中直接@import node_modules裏包的名字，不太好解釋，可點擊去看文檔
• postcss-preset-env：類似babel-preset-env，自動適配當前最新標準
• mini-css-extract-plugin/optimize-css-assets-webpack-plugin：把css抽離出單獨文件；後者對css進行壓縮，官網說wepack5會自帶，webpack4暫時還得加這個

file相關

npm i -D file-loader url-loader

• file-loader：讀圖片、字體等靜態文件用
• url-loader：可以把較小的靜態文件直接轉化成DataURL，以來file-loader

template相關

npm i -D html-webpack-plugin

• html-webpack-plugin：往模板裏注入加了版本號的css/js等

配置文件

config/webpack.base.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const root = path.resolve(__dirname, '../');

module.exports = {
  entry: {
    index: path.resolve(root, 'src/index.js')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
        },
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Hello World',
      template: './index.html',
    }),
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      '@src': path.resolve(root, 'src'),
      '@util': path.resolve(root, 'src/util'),
    },
  },
};

config/webpack.prod.js

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const webpackMerge = require('webpack-merge');
const baseConfig = require('./webpack.base');

const root = path.resolve(__dirname, '../');

module.exports = webpackMerge(baseConfig, {
  mode: 'production',
  output: {
    path: path.resolve(root, 'dist'),
    filename: '[name].[contenthash:10].js',
  },
  module: {
    rules: [
      {
        test: /\.(le|c)ss$/,
        include: path.resolve(root, 'src'),
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader',
        ]
      },
    ],
  },
  devtool: '#source-map',
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].[contenthash:10].css",
      chunkFilename: "[id].[contenthash].css"
    })
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'vendors',
    },
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true // set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
});

config/webpack.dev.js

const path = require('path');
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const baseConfig = require('./webpack.base');
 
const root = path.resolve(__dirname, '../');
 
module.exports = webpackMerge(baseConfig, {
  mode: 'development',
  output: {
    path: path.resolve(root, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(css|less)$/,
        include: path.resolve(root, 'src'),
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
      },
    ],
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.resolve(root, 'dist'),
    port: 9000,
    hot: true,
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ],
});

.babelrc

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ],
    "stage-0"
  ]
}

postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-preset-env': {},
  }
}