webpack的使用与说明

我在之前呢也翻阅过很多这类文章，今天我写这个呢一是给自己学过的东西做个标识，二是给那些还不是很会，刚接触的兄弟们一些帮助！！！

webpack安装

1.在你的项目中安装webpack如下：

npm install webpack -s / / 局部安装

如果你下载的版本高，则需要在下载cli如下：

npm i webpack-cli -s

2.在完成上两步之后，首先初始化项目

npm init / / 初始化后会在项目中新建package.json

3.创建一个文件名webpack.config.js的js文件 如下:

const path = require(“path”);// 导入path模块
module.exports = {
entry: “./src/index.js”, // 入口文件
output: {
filename: “bundle.js”, // 打包后的文件
path: path.resolve(__dirname, “dist”) // 打包后文件所放的文件夹路径
},
};

到目前为止目录的结构图如下(文件夹要自己创！！！)：

4.执行 npx webpack --config webpack.config.js 进行打包 一般我们会在package.json里面配置script如:

“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build”: “webpack” // 加上这一句,打包就能简化
}

5.执行npm run build 进行打包

关于打包css，less，img，html 我也简单的讲一下，如果有问题还请多多包涵

一. 先说说css的打包吧

1. 如果项目需要打包css，首先你需要加载两个模板
   css-loader和style-loader

npm i style-loader css-loader

2. 添加完成之后,在webpack.config.js文件中添加配置资源管理

module: {
rules: [
// 配置css
{
test: /.css$/,
use: [“style-loader”, “css-loader”]
}
]
}

3. 然后在index.js文件中导入css样式 index.js为你的入口文件
4. 至此你就可以打包了

二.同理 加载less 加载图片 加载字体 加载数据(CSV、TSV 和 XML) 都类同 我就不一一讲了

注意：如果你打包less文件 要先引入less：

npm install less --save-dev

压缩JS代码:
在webpack.config.js中引入uglifyjs-webpack-glugin插件

const uglify = require(‘uglifyjs-webpack-plugin’);
plugins:[
new uglify()
],

打包HTML文件:
先安装npm install --save-dev html-webpack-plugin

new htmlPlugin({
minify:{
removeAttributeQuotes:true //是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。
},
hash:true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
template:’./src/index.html’ //是要打包的html模版路径和文件名称。
})

结语

最后祝大家能在代码的海洋畅游！