理财网网站开发源码h5,网站公司做网站,阿里巴巴网站推广怎么做,做网站费用 优帮云Tree Shaking
生产环境去除没有使用到的内容#xff08;开发环境没有删除#xff0c;会影响调试#xff09;只支持ESM规范#xff08;静态引入#xff0c;编译时引入#xff09;#xff0c;不支持CJS#xff08;动态引入#xff0c;执行时引入#xff09;
// webpa…Tree Shaking
生产环境去除没有使用到的内容开发环境没有删除会影响调试只支持ESM规范静态引入编译时引入不支持CJS动态引入执行时引入
// webpack.config.js
// 和devServer同级
// 开发环境会自动加上可不写
optimization:{usedExports: true
}由于babel/polyfill并没有export而是在window上挂载因此不应当检查shaking对于没有导出内容的都应该忽略
// package.json
sideEffects: [babel/polyfill, *.css]不同的打包模式 不同环境有对应的配置文件 npm install webpack-merge-D 安装精简工具 通常将webpack配置文件放在build文件夹下 package.json
{scripts: {dev: webpack-dev-server --config ./build/webpack.dev.js,build: webpack --config ./build/webpack.prod.js,dev:build: webpack --config ./build/webpack.dev.js},devDependencies: {babel/cli: ^7.14.8,babel/core: ^7.15.0,babel/preset-env: ^7.15.0,babel-loader: ^8.2.2,clean-webpack-plugin: ^4.0.0-alpha.0,core-js: ^3.8.3,html-webpack-plugin: ~3.2.0,lodash: ^4.17.21,webpack: ~4.41.5,webpack-cli: ~3.3.10,webpack-dev-server: ~3.10.1,webpack-merge: ^5.8.0}
}webpack.base.js
const path require(path);const HtmlWebpackPlugin require(html-webpack-plugin);
const { CleanWebpackPlugin } require(clean-webpack-plugin)module.exports {entry: path.resolve(__dirname, ../src/index.js),output: {path: path.resolve(__dirname , ../dist),filename: js/[name].js,},module: {rules: [{test: /\.js$/,use: {loader: babel-loader,// options: {// plugins: [[babel/plugin-transform-runtime, {// absuluteRuntime: false,// corejs: 3,// helpers: true,// regenerator: true,// useESMoudles: false,// version: 7.0.0-beta.0// }]]// }},exclude: path.resolve(__dirname, node_modules)},]},plugins: [new HtmlWebpackPlugin({filename: index.html,template: path.resolve(__dirname, ../src/index.html),excludeChunks: [node_modules]}),new CleanWebpackPlugin(),],
};
webpack.dev.js
// 设置热更新
const webpack require(webpack)const { merge } require(webpack-merge)
// 公共配置
const baseConfig require(./webpack.base)// 开发环境特有的配置
const devConfig {mode: development,devtool: cheap-module-eval-source-map,plugins: [new webpack.HotModuleReplacementPlugin(),],devServer: {open: true,host: localhost,port: 3333,proxy: {/api: {target: http://study.jsplusplus.com,secure: false, // 如果target是https的pathRewrite: {^/api: },changeOrigin: true}},hot: true,}
};
module.exports merge(baseConfig, devConfig)webpack.prod.js
const { merge } require(webpack-merge)
// 公共配置
const baseConfig require(./webpack.base)// 生产环境特有的配置
const prodConfig {mode: production,devtool: cheap-module-source-map,
};module.exports merge(baseConfig, prodConfig)
