0
点赞
收藏
分享

微信扫一扫

webpack3整理(第二节/满三节)

小a草 2022-09-09 阅读 91

消除未使用的CSS:安装PurifyCSS-webpack插件
cnpm i purifycss-webpack purify-css -D
const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
plugins:[
new extractTextPlugin("css/index.css"), //这里的/css/index.css是分离后的路径位置
new PurifyCSSPlugin({
paths: glob.sync(path.join(__dirname, 'src/*.html')),
})
]
注明:这里配置了一个paths,主要是需找html模板,purifycss根据这个配置会遍历你的文件,查找哪些css被使用了。
使用这个插件必须配合extract-text-webpack-plugin这个插件。
----------------------------------------------------------------------------------------------
Babel的安装与配置
cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react -D
注明:babel-preset-react(解析jsx语法的包vue可以不装)
配置:
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
options:{
presets:[
"es2015","react"
]
}
},
exclude:/node_modules/
}

虽然Babel可以直接在webpack.config.js中进行配置,但是考虑到babel具有非常多的配置选项,
如果卸载webapck.config.js中会非常的雍长不可阅读,所以我们经常把配置卸载.babelrc文件里。
----------------------------------------------------------------------------------------------
.babelrc配置

{
"presets":["react","es2015"]
}

loader配置可更改为:
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
},
exclude:/node_modules/
}
现在网络上已经不流行babel-preset-es2015官方推荐使用的是babel-preset-env
cnpm install babel-preset-env -D
{
"presets":["react","env"]
}
在实际工作中还是要安装Babel的,这样能更好的兼容每种浏览器,把Babel的配置文件分解出来是最好的选择。
----------------------------------------------------------------------------------------------
开发环境和测试环境的差异性
一个项目中是有开发环境和生产环境的,这两个环境的依赖也是不同的:
开发依赖:只在开发中用来帮助你进行开发,简化代码或者生成兼容设置的以来包。你可以打开package.json来查看,devDependencies的下面的这些包为开发使用的包。这些包在生产环境中并没有用处。
生产依赖:就是比如我们的js使用了jquery,jquery的程序要在浏览器端起作用,也就是说我们最终的程序也需要这个包,这就是生产依赖。这些包在dependencies中。

npm安装/cnpm安装(cnpm方便快捷求稳的话建议npm)
第一种:
npm install jquery //不建议的安装方式
第二种:(-S是简写方式安装)
npm install jquery --save //安装完成后,它存在于package.json的dependencies中,也就是说它是生产环境需要依赖的包(上线时需要的以来包)。
第三种:(-D是简写方式安装)
npm install jquery --save-dev //安装完成后,它存在于package.json的devDependencies中,也就是说它是开发环境中需要的,上线并不需要这个包的依赖。
----------------------------------------------------------------------------------------------
JS中的模块化实现
webpack模块
function gogo(){
alert('hello:'+'webpack');
}
module.exports=gogo;
优雅打包第三方类库
ProvidePlugin是一个webpack自带的插件
plugins:[
new webpack.ProvidePlugin({
$:"jquery"
})
]
BannerPlugin插件使用后会在JS中加上我们的版权或开发者声明
watch的配置:(在webpack.config.js中和入口出口同一个文件里面配置)
watchOptions:{
//检测修改的时间,以毫秒为单位
poll:1000,
//防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存,不进行打包操作
aggregateTimeout:500,
//不监听的目录
ignored:/node_modules/,
}

后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包。
----------------------------------------------------------------------------------------------
单个/多个第三方类库抽离
1、安装第三方类库如jq,vue,swiper等等
2、修改入口文件
entry:{
entry:'./src/main.js',
jquery:'jquery',
vue:'vue'
},
3、修改CommonsChunkPlugin配置
需要修改两个位置:
第一个是在name属性里把原来的字符串(单个第三方库)改为数组(多个第三方库),因为我们要引入多个模块,所以是数组;
第二个是在filename属性中把我们输出的文件名改为匹配付[name],这项操作就是打包出来的名字跟随我们打包前的模块。
单个第三方库配置:
new webpack.optimize.CommonsChunkPlugin({
//name对应入口文件中的名字,我们起的是jQuery
name:'jquery',
//把文件打包到哪里,是一个路径
filename:"assets/js/jquery.min.js",
//最小打包的文件模块数,这里直接写2就好
minChunks:2
})
多个第三方库配置:
new webpack.optimize.CommonsChunkPlugin({
//name对应入口文件中的名字,我们起的是jquery
name:['jquery','vue'],
//把文件打包到哪里,是一个路径
filename:"assets/js/[name].js",
//最小打包的文件模块数,这里直接写2就好
minChunks:2
})
----------------------------------------------------------------------------------------------
静态资源集中输出(项目中没有引用的图片资源或者其他静态资源)
使用copy-webpack-plugin插件
cnpm install --save-dev copy-webpack-plugin
在webpack.config.js引入
const copyWebpackPlugin= require("copy-webpack-plugin");
配置:
new copyWebpackPlugin([{
from:__dirname+'/src/public',
to:'./public'
}])
from:要打包的静态资源目录地址,这里的__dirname是指项目目录下,是node的一种语法,可以直接定位到本机的项目目录中。
to:要打包到的文件夹路径,跟随output配置中的目录。所以不需要再自己加__dirname。

new

 



举报

相关推荐

0 条评论