Webpack基础配置

zoukankan html css js c++ java

Webpack基础配置
英文官网：https://webpack.js.org/

中文文档：https://webpack.docschina.org/

写在前面：
1. 最好在文件夹中安装 webpack、webpack-cli，尽量不要使用全局安装 webpack、webpack-cli。全局的卸载：npm uninstall webpack webpack-cli -g
2. 如果我们转移了文件夹，那么在转移之后进入项目，一定要打开终端 npm install，否则会有各种包的缺失。
一、安装与初始化

1. 全局安装 webpack 和 cli

npm i webpack webpack-cli -g

2. mkdir demo（新建文件夹 demo）

3. cd demo （进入文件夹 demo）

4. 包初始化

npm init -y （-y是默认配置）

5. 本地安装 webpack webpack-cli

npm i webpack webpack-cli --save-dev（开发模式）

6. 初始化（在 src 目录下）

(1) 新建入口文件 index.js
```
import data from './data.json'

function add (a, b) {
  return a + b;
}

console.log(add(1, 2));

console.log(data);
```
(2) data.json
```
{
  "name": "chen"
}
```
(3) 新建模板文件 index.html
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <img src="./music.png" alt="音乐">
</body>
</html>
```
二、打包初体验

1. webpack打包初体验（开发环境）

webpack ./src/index.js -o ./dist/bundle.js --mode=development

注意：-o 表示 output 输出（./dist/bundle.js 就是输出的位置和 js 名称），--mode=development 表示指定模式 mode 为开发模式 development。（= 可以省略，直接写 --mode development 也可以）

2. 测试 bundle.js

使用打包的 bundle.js，根目录新建一个 index.html，在 script 标签中引入 bundle.js

3. 生产环境下的打包

webpack ./src/index.js -o ./dist/bundle_production.js --mode=production

4. 补充

(1) webpack 默认可以处理js文件、json文件，对于其他文件需要借助 loader 包来转换才能识别。
(2) 生产环境比开发环境多了压缩代码和代码混淆。

三、配置文件

通过配置文件（webpack.config.js）来打包。

1. 根目录下新建 webpack.config.js
```
let path = require('path'); // node 的 path 模块，可以获取当前目录位置

module.exports = {
  // 入口文件
  entry: './src/index.js', 
  // 输出文件
  output: {
    // 输出文件名称
    filename: 'bundle.js', 
    // filename: '[chunkhash].js'
    // 指定输出路径（绝对路径）__dirname 表示当前具体的目录
    // path.resolve()的作用是整合目录
    path: path.resolve(__dirname, 'dist'),
  }, 
    // 模式（development（开发） / production（生产））
    mode: 'development'
}
```
以上，配置了入口文件、输出路径、打包模式。

注意： 输出文件位置的文件名称可以设置为 chunkhash 值。（但是会和 --hot 指令冲突）

https://blog.csdn.net/qq_24504591/article/details/88117595?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

例如：
```
filename: '[chunkhash].js'
```
2. webpack 命令的简写

因为在配置文件中设置了 mode，因此打包时不必再输入 --mode=development

输入：webpack ./src/index.js -o ./dist/bundle.js

或者直接：webpack

注意： 因为配置文件中设置的 mode 是开发环境，因此默认打包出来的就是开发环境下的打包文件。

但是，如果想要生产环境的打包文件，那么只要在后面加上 --mode=production 即可。（ = 等号可以省略）

webpack --mode=production

四、loader 配置（样式打包）

用 loader 对 css 文件打包（样式打包）

1. 新建 style.css
```
body {
  background-color: #abcdef;
}
```
2. 在 index.js 中导入：import './style.css'
```
// 入口文件：./src/index.js
import './style.css'
```
js 是不可以识别 css 的，因此为了让 css 变成 js，就要用到 loader 了。

3. loader 配置
```
// webpack.config.js
mododule.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        // use 数组中 loader 的转换顺序是从下到上！！！  style(css(xxx.css))
        // css-loader 表示将 css文件转换成 js 文件；
        // style-loader 表示将 js 的样式内容插入 style 标签中。
        use: ['style-loader','css-loader']
      }
    ]
  }
}
```
(1) 然后打包，发现报错，需要引入 style-loader 包。

npm i style-loader --save-dev

(2) 引入后，重新打包，报错说缺少 css-loader，继续引包。

npm i css-loader --save-dev

(3) 重新打包编译，正常执行。

webpack

五、plugins 插件（html 模板）

使用 plugins 插件完成 html 模板的打包，作用是将所有文件都打包编译放在一起。

1. 引入 html-webpack-plugin 模块
```
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过npm安装
```
2. 安装依赖

npm i html-webpack-plugin --save-dev

3. plugins配置
```
plugins: [
  new HtmlWebpackPlugin({template: './src/index.html'}) // 哪个 html 文件作为模板？
],
```
4. 重新编译打包

webpack

六、图片资源打包（需要文件加载器 file-loader）

1. 配置图片规则、html模板规则
```
// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.(jpe?g|png|gif)$/,
        use: [
          // 图片规则
          {
            loader: 'url-loader',
            options: {
              limit: 2048, // 图片大小限制 2kb，减少请求数量，但转换后体积会变大
              esModule: false, // 关闭 url-loader 的 es6 模块化解析
              // [name] 表示原来的图片名称，[hash:7] 表示取图片hash的前七位，[ext] 表示文件后缀
              name: '[name].[hash:7].[ext]' 
            }
    	  },
          // html 规则
          {
            test: /.html$/,
            use: [
              { loader: 'html-loader' }
            ]
          }
  	   ]
      }
},
    ]
  }
}
```
2. 安装依赖

npm i file-loader --save-dev （处理图片文件前必须要安装的文件加载器）

npm i url-loader html-loader --save-dev

七、配置：热加载（热更新）

热加载是什么？就是可以进行修改内容时的同时，同步修改的变化，不用每次改完数据都要自己手动去刷新页面，方便于开发。

1. 配置开发环境服务器
```
// webpack.config.js
module.exports = {
  // ...
  devServer: {
    // 项目构建的基准路径
    contentBase: path.resolve(__dirname, 'dist'),
    // 启动gzip编码压缩
    compress: true,
    // 端口号
    port: 3000,
    // 是否自动打开浏览器
    open: true
  }
}
```
2. 安装依赖

npm i webpack-dev-server -g

3. 开启热加载

webpack-dev-server

八、npm script 设置（快捷指令）

1. 指令添加

为了方便调试，我们可以在 package.json 中添加命令。
```
// package.json
"script": {
  "dev": "webpack --mode development", // 开发环境打包
  "build": "webpack --mode production", // 生产环境打包
  "server": "webpack-dev-server --mode development", // 热加载，实时更新，便于开发（不会打包）
  "watch": "webpack --mode production --watch" // 观察者模式：随时自动构建
}
```
2. 使用

在命令行中输入：npm run 对应指令

例如启动热加载：

npm run server

九、插件：打包进程显示

在打包时，显示打包的进程。
```
// webpack.config.js
const webpack = require('webpack'); // 从 node 中提取 webpack 包

module.exports = {
  plugins: [
    new webpack.ProgressPlugin()
  ]
}
```
十、babel-loader

将 js 文件编译成 es5 规范，提升兼容性。
```
module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/, // 不对npm文件夹进行转换
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        ]
      },
    ]
  }
}
```
(1) exclude 表示某些文件不需要进行 babel 的匹配。比如 node_module 目录。

(2) presets 表示 babel-loader 的预处理，用@babel/preset-env自定适应版本。

注意需要安装三个重要的依赖：（ babel-loader @babel/core @babel/preset-env ）

npm install babel-loader @babel/core @babel/preset-env --save-dev

其中，@babel/core 用来分析 es 语法，@babel/preset-env 表示让目标环境自动适应 es 的最新版本 。
- 关于@babel/preset-env更多：https://blog.windstone.cc/es6/babel/@babel/preset-env.html
十一、sass-loader

sass 语法的匹配，将 sass 语法编译成 css 语法后再变成 style 写进 html 模板。

1. sass 文件的创建和引入

创建一个 .scss 文件
```
// src目录下
div {
  h2 {
     100px;
    height: 50px;
    line-height: 50px;
    background-color: blue;
  }
}
```
2. 在入口文件中引入
```
// src/index.js
import './style.scss'
```
3. 规则配置
```
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {test:/.scss$/, use:['style-loader','css-loader', 'sass-loader']}
    ]
  }
}
```
style( css( sass( style.scss ) ) )

4. 安装依赖

npm i sass-loader node-sass --save-dev

5. 补充：sass 和 scss 的区别？

sass 和 scss 其实是一样的 css 预处理语言，其后缀名是分别为 .sass 和 .scss 两种。

SASS版本 3.0 之前的后缀名为 .sass，而版本 3.0 之后的后缀名 .scss。

两者是有不同的，继 sass 之后 scss 的编写规范基本和 css 一致，sass 时代是有严格的缩进规范并且没有 {} 和 ;

而 scss 则和 css 的规范是一致的。

十二、插件：css 压缩

插件：mini-css-extract-plugin 生成 link 标签，比 style 标签灵活。

https://webpack.js.org/plugins/mini-css-extract-plugin/

1. 安装依赖
```
npm install --save-dev mini-css-extract-plugin
```
2. 配置插件
```
// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    // ...
    new MiniCssExtractPlugin()
  ],
}
```
3. 配置规则
```
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}
```
这样，就把原来的 style 标签换成了 link 标签，压缩了代码，提高了性能。

十三、插件：文件可视化

可以清晰地看到每个文件打包后的大小，方便文件的优化。

https://www.npmjs.com/package/webpack-bundle-analyzer

1. 安装依赖

npm install --save-dev webpack-bundle-analyzer

2. 配置插件
```
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}
```
3. 使用

以后在执行任意 npm 命令后，都会显示文件的大小分布。

十四、插件：文件压缩

https://webpack.js.org/plugins/compression-webpack-plugin/

1. 安装依赖
```
npm install compression-webpack-plugin --save-dev
```
2. 配置插件
```
// webpack.config.js
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin()
  ]
}
```
十五、配置：源文件映射

在调试代码时，因为受打包的影响，控制台报告的代码位置会与想要得到的位置相去甚远，这时候就要用到 sourcemap，消除这种影响。

https://webpack.js.org/configuration/devtool/
```
// webpack.config.js
module.exports = {
  devtool: 'source-map'
}
```
当添加了这个配置选项后，运行编译打包后，输出文件中就会出现 .map 文件，这个文件保存着映射关系，保证我们访问的是源代码文件。（但是会产生一些性能问题，影响打包编译的速度。建议在生产环境中使用。）
查看全文

相关阅读:
Java读取resource文件/路径的几种方式
 log4j:WARN Please initialize the log4j system properly解决办法
 SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".
log4j.properties配置详解与实例-全部测试通过[转]
testNG中dataprovider使用的两种方式
 远程仓库获取最新代码合并到本地分支
 git 冲突解决办法
 【转】JsonPath教程
 selenium及webdriver的原理【转】
[转]Redis 数据结构简介

原文地址：https://www.cnblogs.com/buildnewhomeland/p/13265090.html

Webpack基础配置

一、安装与初始化

1. 全局安装 webpack 和 cli

2. mkdir demo（新建文件夹 demo）

3. cd demo （进入文件夹 demo）

4. 包初始化

5. 本地安装 webpack webpack-cli

6. 初始化（在 src 目录下）

二、打包初体验

1. webpack打包初体验（开发环境）

2. 测试 bundle.js

3. 生产环境下的打包

4. 补充

三、配置文件

1. 根目录下新建 webpack.config.js

2. webpack 命令的简写

四、loader 配置（样式打包）

1. 新建 style.css

2. 在 index.js 中导入：import './style.css'

3. loader 配置

五、plugins 插件（html 模板）

1. 引入 html-webpack-plugin 模块

2. 安装依赖

3. plugins配置

4. 重新编译打包

六、图片资源打包（需要文件加载器 file-loader）

1. 配置图片规则、html模板规则

2. 安装依赖

七、配置：热加载（热更新）

1. 配置开发环境服务器

2. 安装依赖

3. 开启热加载

八、npm script 设置（快捷指令）

1. 指令添加

2. 使用

九、插件：打包进程显示

十、babel-loader

十一、sass-loader

1. sass 文件的创建和引入

2. 在入口文件中引入

3. 规则配置

4. 安装依赖

5. 补充：sass 和 scss 的区别？

十二、插件：css 压缩

1. 安装依赖

2. 配置插件

3. 配置规则

十三、插件：文件可视化

1. 安装依赖

2. 配置插件

3. 使用

十四、插件：文件压缩

1. 安装依赖

2. 配置插件

十五、配置：源文件映射