对于package.json 中 设置script标签中
"dev": "webpack --mode development",
"prod": "webpack --mode production"
//执行git时 运行 npm run dev 以此运行对应的模式
js-tree-shaking
tree-shaking技术,能够在模块的层面上做到打包后的代码只包含被引用并被执行的模块,而不被引用或不被执行的模块被删除掉,以起到减包的效果。减少页面加载时间
使用到的插件来源 www.npmjs.com
webpack默认的jstree-shaking格式为
var sum = function(a, b) {
return a + b;
}
var chande = function() {
console.log('hahahahh')
}
export default {
sum,
chande
};
//单独变量式导出 而非导出一个对象 并且 需要在production模式下有效
webpack-deep-scope-plugin 插件实现深度js-tree-shaking
使用如下
cnpm install webpack-deep-scope-plugin -D
const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin');
module.exports = {
...,
plugins: [
...,
new WebpackDeepScopeAnalysisPlugin(),
],
}
css-tree-shaking
首先 引用loader解析css文件
随后实现单独抽离出css文件于dist文件夹中
用到的插件mini-css-extract-plugin
使用如下
cnpm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module: {
rules: [{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
//chunkFilename: '[id].css',
//ignoreOrder: false,
}),
],
tree-shaking css
const PurifyCSSPlugin = require('purifycss-webpack');
const path = require('path');
const glob = require('glob-all');
new PurifyCSSPlugin({
// Give paths to parse for rules. These should be absolute!
paths: glob.sync([path.join(__dirname, './*.html'),
path.join(__dirname, './src/index.js')
//用域匹配js中动态加入的dom
]),
}),
postcss
为css添加内核前缀
//下载插件
npm install postcss postcss-loader autoprefixer cssnano postcss-cssnext -D
posscss loader要至于less-loader与css-loader之间
ident 指明操作对象
添加插件 require导入
postcss-cssnext 解析计算属性 添加前缀
cssnano 压缩文件
---------------------------------------------------------------------------------------------------------------------------------------------
html文件处理
实现html抽离 并自动添加链接
html-webpack-plugin
先安装在引用
为区别于每次打包生成的文件 可以添加hash值