1、使用npm的默认配置初始化一个项目
nom init -y
2、安装并使用当前目录下的webpack，需要先卸载全局的webpack
npm uninstall webpack web pack-cli -g
3、将webpack安装在当前目录下，好处是不同工程适配不同版本的webpack
npm install webpack webpack-cli -D
4、安装任意版本的webpack（例：4.16.5版本）
先查看webpack的各种版本信息：npm info webpack
再安装：npm install webpack@4.16.5 web pack-cli -D
5、当前目录下的webpack命令需要加npx
npx webpack
6、 配置文件webpack.config.json基本格式
module.exports={
entry: ‘./index.js’, //入口文件路径
output: {
filename: ‘bundle.js’, //输出文件名
path: path.resolve(__direname, ‘bundle’) //输出文件的绝对路径
}
}
7、package.json中修改script字段可变更打包命令，例：npm run build
"scripts": {
"build": "webpack"
},
8、打包非js文件时需要使用loader，配置文件中增加module字段
module:{
rules:[{
test: /.jpg|png|gif$/, //遇到jpg或png或gif格式的文件时
use: {
loader: ‘file-loader’, //使用file-loader
options: {
name: ‘[name].[ext]’, //file-loader配置文件名及后缀格式
}
}
}]
}
9、使用url-loader可以将文件转换成base64的url字符串，这样的好处是减少了一次http请求，
url-loader内嵌了file-loader，不需要重复安装file-loader
module:{
rules:[{
test: /.jpg|png|gif$/, //遇到jpg或png或gif格式的文件时
use: {
loader: ‘url-loader’,
options: {
name: ‘[name].[ext]’, //file-loader配置文件名及后缀格式
outputPath: ‘images/’, //将这类生成的文件放在images文件夹下
limit: 204800 //小于200KB的文件使用url-loader，否则使用file-loader
}
}
}]
}
10、打包css、scss等样式文件时的配置
module:{
rules[{
test: /.css|scss$/,
use:[
’style-loader’,
{
loader:’css-loader’,
options: {
importLoaders: 2, //遇到新的css引入，从下往上重新走一遍loader的解析
modules: true //使用css的模块模式，引入样式只在当前js文件有效，不影响子文件
}
},
‘sass-loader’,
‘postcss-loader’
]
}]
}
11、htmlWepackPlugin会在打包结束后自动生成html文件，并将打包生成的JS文件
自动引入这个html中，也可以手动配置html模版
const htmlWebpackPlugin = require(‘html-webpack-plugin’) //引入html打包插件
plugins:[
new htmlWebpackPlugin({template: ’src/index.html’}). //使用src目录下的index.html作为模版
]
12、cleanWebpackPlugin能够再打包前清理打包输出目录。
const CleanWebpackPlugin = require(‘clean-webpack-plugin’);
Plugins:[
new CleanWebpackPlugin(‘dist’) //dist为打包文件输出目录
]
13、source-map是源代码和打包代码的映射关系，cheap表示只精确到行且不映射loader等插件，module表示连同第三方插件和loader的映射也输出
eval表示通过sourceURL关联业务代码模块而不生成sourceMap文件，eval-source-map将生成的.map文件内容替换成嵌入sourceURL
devtool:’cheap-module-eval-source-map’ //开发环境最佳模式
14、加上—wathc命令后修改文件会自动打包（npm run webpack —watch），
但是这种方法只是将html页面当作静态界面访问，无法实现http请求或是ajax请求（产生跨域问题）
15、webpack-dev-server能够通过启动一个http服务器来完成代码变化时自动打包，同时更多的配置还能够
实现自动打开浏览器，无刷新修改页面等功能
启动服务器命令：npm run web pack-dev-server
webpack.config.js中的基础配置：
devServere:{
contentBase: ‘./build’ //打包文件生成目录
open: true //启动服务器时自动打开一个服务器
port: 8080 //启动端口为8080
}
16、webpack作为API在node中使用时，可以通过npm安装引入express服务器模块、webpack-dev-middleware打包模块
来自己实现一个带有自动打包功能的服务器（webpack-dev-server就是以上两个模块组合编写出来的）。
17、当修改文件后不想手动刷新页面时需要使用热模块更新插件
webpack.config.js配置：
const webpakc = require(“webpack”)
devServe:{
contentBase: ”./dist”,
hot: “true”, //开启热更新
hotOnly: true //热更新失效时是否自动刷新页面
},
plugins:[ new webpack.HotMoudleReplacementPlugin() ] //插件引入
18、ES6语法转ES5语法使用babel的webpack.config.js配置
module:{
rules: [
test: /.js$/,
exclude: /node_modules/, //对该目录下的文件不做处理
loader: “babel-loader”,
options: {
presets:[ [“@babel/preset-env”,{
useBuiltIns: ‘usage’ //只对引用到的ES6语法做转化，设置此参数后不需要在文件中引入”@babel/polyfill”
}] ]
}
]
}
19、preset-env会污染全局变量，因此在写类库或组件库时最好代替使用plugin-transform-runtime，
它会将babel以闭包的的方式引入，不会污染全局变量。若babel的配置项过多，
则可以将配置写进文件名为.balbelrc的配置文件中
20、在导入模块时，tree shaking能够过滤掉模块中不被引用部分，而只导入引用部分。
它只识别和优化ESmodule方式（import）的静态引入，不支持优化CommonJS(require)方式的动态引入
tree shaking的webpack.config,js中的配置
optimization:{
usedExports: true //开启tree Shaking，便可只导入模块中被引用部分
}
在package.json中的配置：
“sideEffects”:[ “*.js”] //使tree Shaking不对此类文件做处理