Webpack初步了解 - 1

1.调整package.json文档

确保安装包是私有的，并且移除main.js，目的时防止意外发布代码。

2.要在index.js中打包依赖比如lodash，需要在本地安装library（库）

npm install --save lodash

注意：当我们安装一个package时，如果打包到生产环境bundle中，使用

npm install lodash --save

如果只是用于开发环境，比如linter，测试库等，使用命令

npm install --save-dev lodash

3.创建webpack.config.js

const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};

4.构建命令

npx webpack --config webpack.config.js

或者在package.json中scripts中添加 "bulid" : "webpack",

使用 npm run build 命令，代替之前的npx命令

5. 加载CSS

npm install --save-dev style-loader css-loader

在module中配置这些loader

modules:{
 rules:[
	{
		test:/\.css$/i,//正则表达式, \代表转义.   $以.css结尾, i忽略大小写
		use:['style-loader','css-loader'],
	},
 ]
}

注意：style-loader在前，css-loader在后

6.使用Asset Modules加载images图像

{
  test: /\.(png|svg|jpg|jpeg|gif)$/i,
  type: 'asset/resource',
 },

7.使用Asset Modules加载fonts字体

{
   test: /\.(woff|woff2|eot|ttf|otf)$/i,
   type: 'asset/resource',
 },

8.加载数据，比如CSV、TSV 、xml等

npm install --save-dev csv-loader xml-loader

{
  test: /\.(csv|tsv)$/i,
  use: ['csv-loader'],
},
{
  test: /\.xml$/i,
  use: ['xml-loader'],
},

而json文件，nodejs文件是内置的，默认正常运行！

9.设置 HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

该plugin的作用是：HtmlWebpackPlugin 创建了一个全新的文件，所有的 bundle 会自动添加到 html 中。

10.清理 /dist 文件夹

在每次构建前清理 /dist 文件夹，这样只会生成用到的文件。让我们使用 output.clean 配置项实现这个需求