1.打包分类

图片分类

配置

webpack.config.js:module:{//模块rules:[//规则{//图片test:/\.(png|jpg|gif)$/,//做一个限制 当图片小于多少k的时候用base64转化//否则用file-loader产生真实的图片use:{loader:'url-loader',options:{limit:200*1024,//图片小于200k变成base64否则用file-loader产生真实的图片//输出路径outputPath:'/img/',//输出图片路径文件夹名img}}{test:require.resolve('jquery'),use:'expose-loader?$' }{test:/\.js$/,use:{loader:'ealint-loader', options:{ enforce:'pre',}},}{test:/\.js$/,use:{loader:'babel-loader',options:{presets:['@babel/preset-env'],plugins:['@babel/plugin-proposal-class-properties''@babel/plugin-transform-runtime']}},include:path.resolve(__dirname,'src'),exclude:/node_modules/,}{test:/\.css$/,use:['style-loader','css-loader']},{test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader',]},{//处理less文件test:/\.less$/,use:[{loader:'style-loader',options:{insertAt:'top',}},'css-loader','less-loader',]},]}
}

样式分类

配置

webpack.config.js
plugins:[//数组 放着所有的webpack插件new HtmlWebpackPlugin ({template:'./src/index.html',filename:'index.html',minify:{//压缩removeAttributeQuotes:true,collapseWhitespace:true,},hash:true,}),new MiniCssExtractPlugin({filename:'css/main.css',//样式分类文件名css})],

域名下的文件(CDN)

域名+路径 eg：http://www.yuming.cn/img/img.png
http://www.yuming.cn/css/main.css
配置

webpack.config.js
output:{//出口filename:'bundle.js',2.filename:'bundle.[hash:5].js',path:path.resolve（__dirname,'dist'）,publicPath:'http://www.yuming.cn'//域名},

域名单独处理图片或css

eg:单独处理图片

webpack.config.js
{//图片test:/\.(png|jpg|gif)$/,use:{loader:'url-loader',options:{limit:200*1024,outputPath:'/img/',publicPath:'http://www.yuming.cn',//域名}}

webpack02-

1.打包分类

图片分类

样式分类

域名下的文件(CDN)

域名单独处理图片或css

2.打包多页应用

webpack02-相关推荐

最新文章

热门文章