引言
用webpack搭建环境 webpack多入口配置 (一)搭建的环境有很多不足之处,而且在使用开发过程中遇到很多坑。下面我来说下我的坑坑们。
不足之处
为了应付差事,项目要的急,大家都懂得,时间紧张,所以缺少了很多东西,凑活上了就。
首先,没有分离css,其次,没有对代码进行压缩处理。本篇文章主要就这两点进行讨论。
解决不足
明确了问题,我们就要找解决方案,前端的轮子很多,需要什么可以百度或者问问前辈们,经过自己的查询和踩坑前辈的指导,我首先找到了extract-text-webpack-plugin
这个插件,看到大腿就迫不及待的想要抱啊,二话不说一通安装 —save-dev。然后就是一通的红色报错啊,麻蛋的还是英文,大概意思就是什么什么不支持,需要安装什么什么loader之类的,然后又开始百度,查到原来这个东西只支持webpack4以下的版本,问了一个朋友建议我换webpack3,有新版本的怎可屈尊用旧版本的东西,后来终于查到这个替代这个东西的插件mini-css-extract-plugin
和 optimize-css-assets-webpack-plugin
前者用来打包抽离css,后者压缩css。
配置抽离css并且压缩
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
plugins: [
new OptimizeCSSAssetsPlugin({}),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: 'css/[id].css',
publicPath:'https://www.w2le.com/' //这里配置引用路径
})
],
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
// 'postcss-loader',
// 'sass-loader'
]
}
]
图片压缩和js压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
plugins:[
new UglifyJsPlugin(),
new ImageminPlugin({
pngquant: {
quality: '95-100'
}
})
]
在模板中引用js
我们知道打包后入口文件js会被自动插入到模板文件,如果我们想用相对路径引用js要怎么办呢,可以用copy-webpack-plugin
这个插件
const CopyWebpackPlugin = require('copy-webpack-plugin');
new CopyWebpackPlugin([{
from: __dirname + '/src/public', //文件位置
to: __dirname + '/dist/public', //打包后文件位置
force: true
}]),
后期会陆续介绍下这些插件的配置,请和感谢大家持续关注。