环境：
mac操作系统
node
1.安装webpack
npm由于连接是国外的网站，运行速度要稍微慢些，可以用淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
全局安装webpack、webpack-cli、webpack-dev-server。
cnpm install webpack webpack-cli webpack-dev-server -g
2.创建空文件夹
mkdir config dist src
3.初始化npm
npm init -y
package.json文件创建完成
4.在src文件下创建index.htm和index.js文件，使用命令
touch src/index.html
mkdir src/js
touch src/js/main.js
目录结构如图
5.webpack文件的基本结构，entry入口文件，output输出文件，module模块（解析css，图片转换，代码压缩等），plugins插件等等
处理css文件已经分离css，压缩css，ie大于8的版本，进行加上浏览器兼容。
npm install style-loader css-loader extract-text-webpack-plugin --save-dev
{// 分离 css
test:/\.css$/,
use: ExtractTextPlugin.extract({
fallback:"style-loader",
// use: "css-loader"
use: [
{
loader:'css-loader',
options:{
minimize:true,//css压缩
}
},
{
loader:'postcss-loader',
options: {
plugins:()=>{
autoprefixer({
browsers: ['ie >= 8','last 4 version']
})
},
sourceMap:true
}
}
]
})
}
new ExtractTextPlugin("css/abc.css"), // 可以单独设置css的路径
less配置并创建a.less
cnpm i less less-loader --save-dev
mkdir src/css
touch src/css/a.less
在入口文件main.js中引入a.less
import'../css/a.less"
配置less
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']// 编译顺序从右往左
},
分离less编译后的css文件
{
test:/\.less$/,
use:ExtractTextPlugin.extract({ //分离less编译后的css文件
fallback:'style-loader',
use:['css-loader','less-loader']
})
},
安装sass和sass-loader
cnpm i node-sass sass-loader --save-dev
创建sass文件
touch src/css/b.sass
编译sass
{
test:/\.(sass|scss)$/,
use:['style-loader','css-loader','sass-loader']
},
分离sass编译后的css文件
{
test:/\.(sass|scss)$/,
use:ExtractTextPlugin.extract({ //分离less编译后的css文件
fallback:'style-loader',
use:['css-loader','sass-loader']
})
},
安装autoprefixer和postcss-loader
cnpm i autoprefixer postcss-loder --save-dev
配置postcss-loader，自动添加css前缀
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
fallback:'style-loader', // 回滚
use:[
{loader:'css-loader'},
{loader:'postcss-loader'} //利用postcss-loader自动添加css前缀
],
publicPath:'../' //解决css背景图的路径问题
})
},
{
test:/\.less$/,
use:ExtractTextPlugin.extract({ //分离less编译后的css文件
fallback:'style-loader',
use:['css-loader','less-loader']
})
},
{
test:/\.(sass|scss)$/,
use:['style-loader','css-loader','sass-loader']
},
css背景图样式配置
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{ // 这里的options选项参数可以定义多大的图片转换为base64
limit:10000, // 表示小于10kb的图片转为base64,大于10kb的是路径
outputPath:'images' //定义输出的图片文件夹
}
}]
}
html文件里img标签图片路径配置
{
test: /\.html$/,
use: [
{
loader: "html-loader",
}
]
},
打包后图片过大，导致加载缓慢
{
loader: "image-webpack-loader",
options: {
bypassOnDebug: true
}
}
公共js打包
optimization和plugins是同级
optimization:{//提取公共代码
splitChunks:{
cacheGroups:{
vendor:{
//抽离第三方插件
test: /node_modules/,
chunks:'initial',
name:'vendor',//打包后的文件名，任意命名
//设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
priority:0
},
utils:{
//抽离自己写的公共代码，utils这个名字可以随意起
chunks:'initial',
name:'utils',//任意命名
minSize:0//只要超出0字节就生成一个新包
}
}
}
},
html模板打包
cnpm i html-webpack-plugin --save
8.设置webpack-dev-server，并在package.json写入命令
7.package.json里面配置命令
"dev": "webpack --config=config/webpack.common.js"
在终端里面输入命令npm run dev 就可以了
网友评论