Webpack配置

Posted on

项目文件目录

1
2
3
4
5
6
7
8
9
10
11
12
-Demo
|--build
|--dist
|--css
|--js
|--view
|--node_modules
|--src
|--
|--package.json
|--webpack.config.js
|--webpack.production.config.js
  • src：代码开发目录
  • build：开发环境 webpack 输出目录
  • dist：生产环境 webpack 输出目录
  • package.json：项目配置
  • webpack.config.js：开发环境配置
  • webpack.production.config.js：生产环境配置

webpack 配置文件

需命名为 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const path = require("path") // 模块

module.exports = {
  mode: "development",
  entry: path.join(__dirname, "./src/main.js"), // 入口文件
  output: {
    path: path.join(__dirname, "./dist"), // 输出文件
    filename: "bundle.js",
  },
  plugins: [
    // 插件
  ],
  module: {
    rules: [
      // 路由规则
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpg|gif|bmp|jpeg)$/,
        use: "url-loader?limit=1111&name=[hash:8]-[name].[ext]",
      },
      {
        test: /\.(ttf|eot|svg|woff|woff2)$/,
        use: "url-loader",
      },
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
}

webpack-dev-server

  • 通过 npm 安装：npm i webpack-dev-server
  • 运行命令：webpack-dev-server –devtool eval –port 9876 –progress –colors – compress –hot –inline –content-base ./build
    可以在 package.json 中的 script 加一个启动项。
  • –devtool eval：在报错时精确到文件的行号
  • –progress：显示编译的输出内容进度
  • –compress：启用 gzip 压缩
  • –hot：热更新，无需刷新浏览器
  • –colors：显示编译的输出内容颜色
  • –inline：自动刷新模式。默认为 iframe。
  • –content-base：设置输出目录。