数据结构 Netty Flutter centos8 xcode csv cookies jdbc get underscorejs Notify.js 车载u盘 python面向对象 python3删除文件 java类 java访问数据库 java基础编程 如何查看java版本 java查看变量类型 莫莫小工具 德鲁伊武器 js上传图片 东方头条邀请码 飞猪ip cfqq网吧任务 js关闭当前页面 特战英雄辅助 wegame更新失败 igfxpers 联想7450加粉清零 c4d序列号 ae烟雾特效 ps镂空字体怎么做 devenv python游戏ps竖排文字 音乐迷 微信骰子控制 外星人r7 cad如何旋转图形 ghost一键还原
当前位置: 首页 > 学习教程  > 编程语言

webpack之生产环境构建

2020/10/16 18:09:17 文章标签:

在实际应用中&#xff0c;我们会有开发模式和生产模式&#xff0c;webpack可以通过运行不同的命令行代码与运行对应的模式&#xff0c;vue-cli的原理一致 index.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"&…

在实际应用中,我们会有开发模式和生产模式,webpack可以通过运行不同的命令行代码与运行对应的模式,vue-cli的原理一致

  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../dist/bundle.js"></script>
</body>
</html>
  • index.js
    • 该文件中需要照顾的是,输出了’process.env.NODE_ENV’,这个是在webpack.prod.js文件赋值的,表明开发的模式,'production’为生产模式,'development’为开发模式

import { cube } from './math.js';

  function component() {

    console.log(process.env.NODE_ENV);

   var element = document.createElement('pre');

//    element.innerHTML = [
//      'Hello webpack!',
//      '5 cubed is equal to ' + cube(5)
//    ].join('\n\n');
   
   element.innerHTML = [
     'Hello webpack!',
     '5 cubed is equal to 111'
   ].join('\n\n');

    return element;
  }

  document.body.appendChild(component());
  • package.json
    • 需要注意的是scripts字段
      • “build”: “webpack --config webpack.prod.js”,表明用的是‘webpack.prod.js’配置文件,对应生产模式
      • “server”: “webpack-dev-server --open --config webpack.dev.js”,表示使用‘webpack.dev.js’文件,对应开发模式
{
  "name": "webpack-demo2",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "server": "webpack-dev-server --open --config webpack.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.5.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.2.0"
  }
}
  • webpack.common.js
    • 该文件是公共部分,主要配置打包入口出口,CleanWebpackPlugin是每次运行都清除dist文件夹,HtmlWebpackPlugin是修改entry字段可以htnl文件加载的script标签可以动态响应
const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 打包入口
    entry: {
        'app': './src/index.js'
    },
    // 打包输出
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    // 插件使用
    plugins: [
        // 清除dist文件
        new CleanWebpackPlugin(),
        // 动态改变进出口字段进行自动更改
        new HtmlWebpackPlugin({
            title: 'Production'
        })
    ]
}
  • webpack.dev.js
    • 需要注意的merge函数,这个含税事件common模块和后面的数据进行合并,devtool和devServer是webpack-dev-server的动态加载
const {merge} = require('webpack-merge')
const common = require('./webpack.common.js')

// merge函数是可以理解为合并代码
module.exports = merge(common, {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    }
})
  • webpack.prod.js
    • 这个文件只要是添加了UglifyJSPlugin,是为了打包时候减小bundle的文件的体积
    • 还有就是设置process.env.NODE_ENV
const webpack = require('webpack');
const {merge} = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  plugins: [
    new UglifyJSPlugin({
      sourceMap: true
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
});
  • 运行npm run server(注意,这时候打开的是src文件夹下的html文件)
    在这里插入图片描述
    在这里插入图片描述

  • 运行npm run buildr(注意,这时候打开的是dist文件夹下的html文件)
    在这里插入图片描述
    在这里插入图片描述


本文链接: http://www.dtmao.cc/news_show_300383.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?