webpack 搭建基础开发环境
- 配置css
- 配置js
- 配置html
- 配置图片
- 配置文件
1.css 打包配置
- 把css抽离单独的文件
(1)安装 mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin
(2)plugin 中加入MiniCssExtractPlugin 并设置打包文件名
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
new MiniCssExtractPlugin({
fileName:"css/build.css"
}),
(3)rules 配置加载loader
{
test:/\.css$/,
use:[
MiniCssExtractPlugin.loader,
'css-loader',
]
},
- css 浏览器兼容性
(1)使用postcss-loader
npm i -D postcss-loader postcss-import postcss-preset-env
{
// 还需要在package.json配置兼容浏览器 定义nodejs环境变量 使用browserlist 环境
loader:"postcss-loader",
options:{
ident:'postcss',
plugins:()=>[
require('postcss-preset-env')()
]
}
}
(2)在package.json配置兼容浏览器
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
},
(3)nodejs环境变量
process.env.NODE_ENV = 'production';//development
- 文件压缩
(1)安装 optimize-css-assets-webpack-plugin
npm install optimize-css-assets-webpack-plugin -D
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")//css 压缩
(2)直接使用
new OptimizeCssAssetsWebpackPlugin(),
2.js 打包配置
1 加入校验 eslint-loader
npm install eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import --save-dev
{
test:/\.js$/,
enforce:"pre",
exclude:/node_modules/,
use:"eslint-loader",
options:{
fix:true
}
},
在package.json 中加入配置
"eslintConfig": {
"extends": "airbnb-base"
}
2 解决浏览器兼容性 babel-loader
(1)加载loader
npm install -D babel-loader @babel/core @babel/preset-env core-js
{
test:/\.js$/,
// exclude:/node_modules/,
loader:"babel-loader",
options:{
presets:[
[
"@babel/preset-env",
{
useBuiltIns:'entry',
corejs:{
version:3
},
targets:{
'chrome':'60',
}
}
]
]
}
}
3.图片 打包配置
npm install url-loader --save-dev
{
test:/\.png|jpg|gif/,
loader:'url-loader',
options:{
name:'[hase:10].[ext]',
limit:8*1024,
outputPath:'images',
esModule:false
}
}
4.html 配置
(1)下载
npm install --save-dev html-webpack-plugin
(2)plugin
new HtmlWebpackPlugin({
template:"./src/index.html",
minify:{
collapseInlineTagWhitespace:true,
removeComments:true
}
})
(3)处理html引入图片
npm install --save-dev html-loader
{
test:/\.html$/,
loader:'html-loader'
}
5.处理其他文件
npm install file-loader --save-dev
{
exclude:/\.js|css|less|html|jpg|png|gif$/,
loader:'file-loader',
options:{
outputPath:"media"
}
}