Webpack4实战

1. 我们先新建一个项目 project 并用 npm 命令初始化项目（一路回车）

npm init

2. 安装 webpack 与 webpack-cli ( 4 版本需要cli才能执行命令)

npm install --save-dev webpack webpack-cli

3. 新建 src 文件夹，存放我们要打包的源码，默认输入文件是 index.js,所以我们在 src 下新建一个index.js文件

4. 新建 webpack.config.js，webpack配置都是在这个文件下

5. 在package.json中配置服务和打包命令

这里配置了简单的webpack，注释详细适合入门，话不多说贴上代码：

webpack.config.js

/** webpack.config.js*/
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin") // 自动生成index.html
const { CleanWebpackPlugin } = require("clean-webpack-plugin") // 每次打包清空文件夹
const MiniCssExtractPlugin = require("mini-css-extract-plugin") // css分离
const TerserWebpackPlugin = require("terser-webpack-plugin") // 压缩js(在optimization中配置)
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css

module.exports = {
  context: process.cwd(),
  mode: "production", // 开发环境和生产环境配置有很多不同，webpack4以后可以配置mode development/production 用于提供模式配置选项告诉webpack相应地使用其内置的优化
  devtool: "eval", // eval会有sourcemap
  // entry: "./src/index.js", // 入口文件 如果是一个文件就是单入口 多入口要变成对象 输出文件filename不能写单个
  entry: {
    index: "./src/index.js",
    login: "./src/login.js"
  },
  output: { // 输出文件
    path: path.resolve(__dirname, "dist"), // 输出目录只能是绝对目录
    filename: "[name].[hash].js", // 输出文件名(bundle.js,如果是单入口，输出的文件名就是main)   防止缓存有三种hash: hash chunkHash contentHash   [hash:8](只要八位)
    publicPath: "/" // 根路径,指定的是构建后在html里的路径(即在浏览器中的访问路径)
  },
  devServer: { // 安装webpack-dev-server –D (其实是express开发服务器) package.json可以配置--open 运行时自动打开页面
    contentBase: path.resolve(__dirname, "dist"), // 配置开发服务器运行时的根路径(产出文件的根目录)
    port: 8082, // 监听的端口
    host: "localhost", // 开发服务器监听的主机地址
    compress: true // 开发服务器是否启动gzip等压缩
  },
  module: {
    rules: [
      {
        test: /\.css/,
        // use: ["style-loader", "css-loader"] // loader三种写法: use/loader/use+loader; 从右到左处理css文件
        use: [{loader: MiniCssExtractPlugin.loader}, "css-loader"] // css分离
      },
      {
        test: /\.(jpg|jpeg|png|gif|svg)$/,
        // use: ["file-loader"] // url-loader比file-loader 功能强(url-loader内置了file-loader)
        use: {
          loader: "url-loader",
          options: {
            limit: 10 * 1024, // 如果图片大小小于10k，就转为base64编码
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ // 产出html文件,编译时候会读取模板文件
      template: "./src/index.html", // 指定模板文件
      filename: "index.html", // 产出后的文件名
      hash: true, // 为了避免缓存，可以在产出的资源后面添加hash值
      chunks: ["login", "index"], // 对应入口文件 如果配置了chunksSorteMode,就可以根据代码逻辑进行排序，引入的先后顺序
      chunksSortMode:'manual' // 对引入代码块进行排序的模式chunksSortMode: 默认auto  manual手动  dependency依赖项 Funtion
    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].css", // 代码块名字
      chunkFilename: "[id].css" // 异步加载用
    })
  ],
  optimization: { // 放优化的内容(这里的压缩mode必须是production才会生效)
    minimizer: [ // 放优化的插件
      new TerserWebpackPlugin({ // 压缩js
        parallel: true, // 开启多进程压缩
        cache: true // 开启缓存(压缩过的不压缩)
      }),
      new OptimizeCssAssetsWebpackPlugin({ // 压缩css
        assetNameRegExp: /\.css$/g,
        // cssProcessor: require("cssnao")
      })
    ]
  },
}

package.json

{
  "name": "1.webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "style-loader": "^1.0.0",
    "terser-webpack-plugin": "^2.0.0",
    "url-loader": "^2.1.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  }
}

github地址：https://github.com/leiyangs/webpack-exercise