1》全局安装
npm install webpack -g
npm install webpack-cli -g
2》生成package.json
npm init
3》局部安装
npm install webpack -S
npm install webpack-cli -S
4》打包 : webpack
默认entry ：src/index.js
默认output ：dist/main.js
压缩： webpack --mode production
未压缩：webpack --mode development
5》安装服务器
npm install webpack-dev-server --save-dev
devServer:{
contentBase:"./public", //打开文件
inline:true, //实时刷新
open:true //自动打开
}
package.json
"dev":"webpack-dev-server --open --online"
6》安装css，图片插件
npm install style-loader css-loader file-loader --save-dev
配置
{ test: /\.css$/, use:['style-loader','css-loader'] }
{ test: /\.(jpg|png|jpeg|gif)$/,use:'file-loader'}
7》插件
html-webpack-plugin
src :开发阶段（写代码）
index.html
index.js
style.css
1.jpg
...
public ：生产阶段（项目要上线）
8》使用 webpack.config.js
1》安装（下载）
npm install html-webpack-plugin --save-dev
2》配置(webpack.config.js)
1>const HtmlWebpackPlugin = require("html-webpack-plugin");
2>plugins:[
new HtmlWebpackPlugin({
template:"./src/index.html",
minify:{
removeAttributeQuotes:true,//去除引号
removeComments:true,//去除注释
removeEmptyAttributes:true,//去除空属性
collapseWhitespace:true//去除空格
}
})
]
9》html-withimg-loader
让html内可以支持图片
1》安装(下载)
npm install html-withimg-loader -S
2》配置webpack.config.js
{
test:/\.html$/,
use: 'html-withimg-loader'
}
10》mini-css-extract-plugin
1》下载安装 提取css压缩css
npm install mini-css-extract-plugin optimize-css-assets-webpack-plugin --save-dev
2》配置
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false
}
}
]
new MiniCssExtractPlugin({
filename: './css/[name].css'
}),
new OptimizeCssAssetsPlugin()
11》babel
核心：
babel-core
功能：
babel-loader
babel-preset-env
babel-preset-react
安装（下载）
npm install babel-core babel-loader babel-preset-env babel-preset-react -S
配置
v1:
webpack.config.js
{
test:/(\.jsx|\.js)$/,
use:{
loader:"babel-loader",
options:{
presets:["env",'react']
}
},
exclude:/node_modules/
}
v2:
新增.babelrc文件
{ "presets":['env','react']}