这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战
webpack基础使用
-
vscode新建文件夹
-
命令行输入
npm init -
安装依赖包webpack webpack-cli
npm i webpack webpack-cli -D,- -D 是指安装的是开发依赖，在上线的时候不会打包
-
文件夹中，新建入口文件'src/index.js'
-
打包：命令行输入;
npx webapck,这个指令直接就默认生成dist的main.js，默认是生产环境(0配置打包)
如果想进行手动配置的话，根目录下新建webapck.config.js文件，在文件中编写配置代码。
使用指定配置文件进行打包
webpack.config.js文件能否改名？或者使用指定的配置文件进行打包？
答案是可以的，只需要改一下打包命令即可。
node_moudle默认运行webpack，webpack会调用webapck-cli,webpack-cli中有一个解析对象，里面给出了默认配置文件的文件名的两个选择：‘webpack.config.js’、‘webpackfile.js’。
可以，在打包时输入命令npx webapck --config webapck.config.my.js,即npx webapck --config 指定配置文件名称，就会使用指定的配置文件进行打包。
package.json中配置打包命令：
"scripts": {
"build": "webapck --config 指定配置文件的名称"
}
会自动到node_moudles下找webpack，再次打包时控制台输入命令行npm run build。
本地服务
安装依赖包
npm i webpack-dev-server -D
修改配置文件
devServer: {
// 项目构建后路径
contentBase: resolve(__dirname, 'build'),
port: 3000, // 端口号
progress: true // 滚动条
contentBase: './build' // 起服务的地址
open: true // 自动打开浏览器
compress： true // 启动 gzip 压缩
}
运行指令: npx webpack-dev-server
打包 HTML 资源
-
创建文件
-
下载安装 plugin 包
npm install --save-dev html-webpack-plugin
-
修改配置文件
let HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [ // 放着所有webpack插件
new HtmlWebpackPlugin({ // 用于使用模板打包时生成index.html文件，并且在run dev时会将模板文件也打包到内存中
template: './index.html', // 模板文件
filename: 'index.html', // 打包后生成文件
hash: true, // 添加hash值解决缓存问题
minify: { // 对打包的html模板进行压缩
removeAttributeQuotes: true, // 删除属性双引号
collapseWhitespace: true // 折叠空行变成一行
}
})
]
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
// loader 的配置
]
},
plugins: [
// plugins 的配置
// html-webpack-plugin
// 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
// 需求：需要有结构的 HTML 文件
new HtmlWebpackPlugin({
// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
template: './src/index.html'
})
],
mode: 'development'
};
4.运行指令: npx webpack
