码迷,mamicode.com
首页 > 其他好文 > 详细

打包的一些简单优化

时间:2019-06-15 11:32:46      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:code   merge   too   启动服务   EAP   bundle   const   ide   webstrom   

环境

win10 + webstrom 2019 + webpack4.x + yarn

tree shaking 作用

  生产环境自动启用

  开发模式需要配置(过滤不适用的模块),打包后的 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

 

package.json

{
  "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"
  }
}

 

/src/js 中代码

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;
    };

 

/src/template/index.html 模版文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

 

/build/下的打包配置文件

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,
    }
});

 

打包命令(package.json 中 script 中配置的)

#开发环境,启动服务器
yarn dev 
#开发环境,打包文件
yarn bundle
#生产环境, 打包文件
yarn build

 

打包的一些简单优化

标签:code   merge   too   启动服务   EAP   bundle   const   ide   webstrom   

原文地址:https://www.cnblogs.com/heidekeyi/p/11026823.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!