从零开始梳理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': {},
  }
}