标签：code merge too 启动服务 EAP bundle const ide webstrom
win10 + webstrom 2019 + webpack4.x + yarn
生产环境自动启用
开发模式需要配置（过滤不适用的模块），打包后的 js 会有一些注释如：
/*! exports provided: add, sub, mul */ /*! exports used: add, mul */
. ├── build //配置文件 │ ├── build.js │ ├── bundle.js │ ├── common.js │ └── dev.js ├── dist //打包后生成的目录 │ ├── 6efdf170-app.js │ └── index.html ├── package.json ├── src │ ├── js │ │ ├── app.js │ │ └── math.js │ └── template │ └── index.html └── yarn.lock
{ "name": "sample", "version": "1.0.0", "private": true, "license": "MIT", "sideEffects": [ "*.css" ], "scripts": { "bundle": "webpack --config ./build/bundle.js", "build": "webpack --config ./build/build.js", "dev": "webpack-dev-server --config ./build/dev.js" }, "devDependencies": { "clean-webpack-plugin": "^3.0.0", "html-webpack-plugin": "^3.2.0", "webpack": "^4.33.0", "webpack-cli": "^3.3.3", "webpack-dev-server": "^3.7.1", "webpack-merge": "^4.2.1" } }
app.js
import {add, mul} from ‘./math.js‘;
console.log("add(11 + 11): ", add(11, 11));
console.log("mul(11 + 11): ", mul(11, 11));
window.document.body.innerHTML = ‘<h1>hello world</h1>‘;
math.js
export const add = function (a, b) { return a + b; }, sub = function (a, b) { return a - b; }, mul = function (a, b) { return a * b; };
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"></div> </body> </html>
build.js
const common = require(‘./common.js‘); const merge = require(‘webpack-merge‘); module.exports = merge(common, { mode: ‘production‘, devtool: ‘cheap-module-source-map‘ });
bundle.js
const common = require(‘./common.js‘); const merge = require(‘webpack-merge‘); module.exports = merge(common, { mode: ‘development‘, devtool : ‘cheap-module-eval-source-map‘, optimization: { usedExports: true } });
common.js
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); const {CleanWebpackPlugin} = require(‘clean-webpack-plugin‘); module.exports = { entry: { app: ‘./src/js/app.js‘ }, output: { filename: ‘[hash:8]-[name].js‘ }, plugins: [ new HtmlWebpackPlugin({ template: ‘./src/template/index.html‘ }), new CleanWebpackPlugin() ] };
dev.js
const common = require(‘./common.js‘); const bundle = require(‘./bundle.js‘); const merge = require(‘webpack-merge‘); const path = require(‘path‘); module.exports = merge(common, bundle, { devServer: { contentBase: path.resolve(‘../dist‘), host: "127.0.0.1", port: 12858, hot: true, hotOnly: true, } });
#开发环境，启动服务器 yarn dev #开发环境，打包文件 yarn bundle #生产环境， 打包文件 yarn build
标签：code merge too 启动服务 EAP bundle const ide webstrom
原文地址：https://www.cnblogs.com/heidekeyi/p/11026823.html
