当前位置:首页 > webpack搭建环境 webpack多入口配置 (二)

webpack搭建环境 webpack多入口配置 (二)

发布于 2018-11-24 阅读 484 次 webpack
####引言 用webpack搭建环境 webpack多入口配置 (一)搭建的环境有很多不足之处,而且在使用开发过程中遇到很多坑。下面我来说下我的坑坑们。 ####不足之处 为了应付差事,项目要的急,大家都懂得,时间紧张,所以缺少了很多东西,凑活上了就。 首先,没有分离css,其次,没有对代码进行压缩处理。本篇文章主要就这两点进行讨论。 ####解决不足 明确了问题,我们就要找解决方案,前端的轮子很多,需要什么可以百度或者问问前辈们,经过自己的查询和踩坑前辈的指导,我首先找到了`extract-text-webpack-plugin` 这个插件,看到大腿就迫不及待的想要抱啊,二话不说一通安装 --save-dev。然后就是一通的红色报错啊,麻蛋的还是英文,大概意思就是什么什么不支持,需要安装什么什么loader之类的,然后又开始百度,查到原来这个东西只支持webpack4以下的版本,问了一个朋友建议我换webpack3,有新版本的怎可屈尊用旧版本的东西,后来终于查到这个替代这个东西的插件`mini-css-extract-plugin` 和 `optimize-css-assets-webpack-plugin` 前者用来打包抽离css,后者压缩css。 ####配置抽离css并且压缩 ```javascript 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压缩 ```javascript 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`这个插件 ```javascript const CopyWebpackPlugin = require('copy-webpack-plugin'); new CopyWebpackPlugin([{ from: __dirname + '/src/public', //文件位置 to: __dirname + '/dist/public', //打包后文件位置 force: true }]), ``` 后期会陆续介绍下这些插件的配置,请和感谢大家持续关注。