webpack4.x

1.npm init

2. 创建目录结构:

| - project

​ | - dist

​ | - src

​ | - main.js

​ | - index.html

3. 安装 webpack 与 webpack-cli

yarn add webpack -dev

yarn add webpack-cli -dev

4. 写 webpack.config.js

1
2
3

moudle.exports = {
  mode: "development", //development不压缩 production压缩
};

webpack4.x 中约定大于配置，默认打包入口为 src->index.js，输出为 dist -> main.js

5. 添加 webpack-dev-server

在 package.json 添加构建脚本：

参数：

• –open [chrome/firefox/iexplore]：打开浏览器
• –port port：端口号
• –hot：开启热更新
• –compress：压缩
• –host 127.0.0.1：打开域名

“dev”："webpack-dev-server"

webpack-dev-server 打包文件默认存在项目根目录，存在内存中

6. 添加 html-webpack-plugin 插件

1. yarn add html-webpack-plugin -dev

2. 实例化 html-webpack-plugin 插件：

1
2
3
4
5
6

const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlPlugin = new HtmlWebPackPlugin({
  template: path.join(__dirname, "src/index.html"),
  filename: "index.html", //生成内存中首页名称
});

3. 在 package.json 中添加插件

1

plugins: [htmlPlugin];

7. 配置 babel：

1. 运行yarn add babel-core babel-loader babel-plugin-transform-runtime --dev
2. 运行yarn add babel-preset-env babel-preset-stage-0 –dev

可选：

3. yarn add babel-preset-react -D支持 jsx 转换

webpack.config.js 添加 rules：

1
2
3

module: {
  rules: [{ test: /\.js|.jsx$/, use: "babel-loader", exclude: /node_modules/ }];
}

配置.babelrc：

1
2
3
4

{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["transform-runtime"]
}

8. 配置 resolved

1
2
3
4
5
6

resolved:{
  extensions:['.js', '.jsx', '.json']//表示下列后缀名可省略
    alias:{
        '@':path.join(__dirname, './src')
    }
}

9. 添加 css 解析

npm install style-loader css-loader

1
2
3
4
5
6

module: {
  rules: [
    { test: /\.js|.jsx$/, use: "babel-loader", exclude: /node_modules/ },
    { test: /\.css$/, use: ["style-loader", "css-loader?modules"] },
  ];
}

可以再 css-loaders 中添加中加 modules 来模块化：

:global(类名)：可以接受所有的

只针对类选择器和 id 选择器模块化，不会模块化标签选择器

如果启用第三方模块化，那么我们使用的样式需要用.sass/.less 结尾，而.css 结尾用来处理其他如 bootstrap 库