来自 Web前端 2020-05-07 05:42 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

Webpack配置区分开发环境和生产环境

时间: 2019-09-06阅读: 102标签: 环境

关于vue的npm run dev和npm run build的区别介绍,下面就分享给大家,具体如下:

在项目开发的时候,我们通常会将程序分为开发环境和生产环境(或者叫线上环境),开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置,也就是方便我们开发人员调试开发的一种环境;生产环境通常指的是我们将程序开发完成经过测试之后无明显异常准备发布上线的环境,也可以理解为用户可以正常使用的就是生产环境;

├─build│ ├─build.js│ ├─check-versions.js│ ├─dev-client.js│ ├─dev-server.js│ ├─utils.js│ ├─vue-loader.conf.js│ ├─webpack.base.conf.js│ ├─webpack.dev.conf.js│ ├─webpack.prod.conf.js│ └─webpack.test.conf.js├─config│ ├─dev.env.js│ ├─index.js│ ├─prod.env.js│ └─test.env.js├─...└─package.json

当然开发环境和生产环境在配置方面的需求是不一样的,但是有共同点:

以上是关于bulid与run的所有文件

开发环境的需求:

指令分析

模块热更新 (本地开启服务,实时更新) sourceMap (方便打包调试) 接口代理 (配置proxyTable解决开发环境中的跨域问题)

package.json里面

代码规范检查 (代码规范检查工具)

"dev": "node build/dev-server.js","build": "node build/build.js",

生产环境的需求:

意思:运行”npm run dev”的时候执行的是build/dev-server.js文件,

提取公共代码 压缩混淆(压缩混淆代码,清除代码空格,注释等信息使其变得难以阅读) 文件压缩/base64编码(压缩代码,减少线上环境文件包的大小) 去除无用的代码

运行”npm run build”的时候执行的是build/build.js文件。

开发环境和生产环境的共同需求:

build文件夹分析

同样的入口 同样的代码处理(loader处理) 同样的解析配置

build/dev-server.js

在我们搭建好Vue-cli脚手架之后,我们的build文件夹会分别自动的生成webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js三个webpack配置文件;

npm run dev 执行的文件build/dev-server.js文件,执行了:

webpack.base.conf.js:webpack的开发环境和生产环境的共有配置(开发环境和生产环境都是需要执行的配置)

检查node和npm的版本 引入相关插件和配置 创建express服务器和webpack编译器 配置开发中间件(webpack-dev-middleware)和热重载中间件(webpack-hot-middleware) 挂载代理服务和中间件 配置静态资源 启动服务器监听特定端口 自动打开浏览器并打开特定网址

webpack.dev.conf.js:webpack的开发环境的特有配置(只在开发环境中执行,生产环境中不执行)

说明: express服务器提供静态文件服务,不过它还使用了http-proxy-middleware,一个http请求代理的中间件。前端开发过程中需要使用到后台的API的话,可以通过配置proxyTable来将相应的后台请求代理到专用的API服务器。

webpack.prod.conf.js:webpack的生产环境的特有配置(只在生产环境中执行,开发环境中不执行)

build/webpack.base.conf.js

我们为什么要区分开发环境和生产环境呢?

dev-server依赖的webpack配置是webpack.dev.conf.js文件,

因为一个项目的开发过程中肯定不会是一个版本开发完之后就立马上线,开发是必需,上线是目的;在开发的过程中会有各种各样的问题,比如开发环境中跨域、开发环境和生产环境因环境不同而产生的未知奇葩错误等等都是会时常发生的,我们区分环境的目的就是为了让开发人员在开发的过程中可以方便调试,保持高效的开发;让程序在生产环境中正常有效的运行;

测试环境下使用的是webpack.prod.conf.js

webpack.base.conf.js配置

webpack.dev.conf.js中又引用了webpack.base.conf.js

const path = require('path');//清除build/dist文件夹文件const CleanWebpackPlugin = require('clean-webpack-plugin');//生成创建Html入口文件const HtmlWebpackPlugin = require('html-webpack-plugin');//将css提取到单独的文件中const MiniCssExtract = require('mini-css-extract-plugin');//css压缩const OptimizeCss = require('optimize-css-assets-webpack-plugin');//压缩js文件const UglifyJsPlugin = require('uglifyjs-webpack-plugin');//引入webpackconst webpack = require('webpack');module.exports = {//webpack 入口文件 entry: './src/index.js',//webpack 输出文件配置 output: { //输出文件路径 path: path.resolve(__dirname, 'dist'), //输出文件名 filename: 'k-editor.[hash:8].js', }, //配置插件 plugins: [ //使用插件清除dist文件夹中的文件 new CleanWebpackPlugin({ path: './dist' }), //使用插件生成Html入口文件 new HtmlWebpackPlugin({ //模板文件路径 template: "./src/index.html", //模板文件名 filename: "index.html", minify: { removeAttributeQuotes: true, //删除双引号, collapseWhitespace: true, //压缩成一行, }, hash: true }), //提取css到style.css中 new MiniCssExtract({ filename: 'style.css' }), ], resolve: { // modules: [path.resolve('node_modules')],//只在当前目录下查找 alias: { //别名 'bootstrap': 'bootstrap/dist/css/bootstrap.css', }, // mainFields: ['style', 'main'],//优先寻找style, // mainFiles: [],//入口文件的名字,默认index.js // extensions: ['js', 'css', 'json', 'vue']//扩展名顺序 }, //loader加载器模块配置 module: { rules: [ { //正则表达式匹配.css为后缀的文件 test: /.css$/, //使用loader use: [ MiniCssExtract.loader, 'css-loader', { loader: "postcss-loader" }, ] //正则表达式匹配.less为后缀的文件 //使用lodaer来处理 }, { test: /.less$/, use: [ MiniCssExtract.loader, 'css-loader', { loader: "postcss-loader" }, 'less-loader' ] }, /* { test: /.js$/, //不包括node_modules exclude: /node_modules/, use: [{ loader: "eslint-loader", options: { enforce: 'pre' //强制更改顺序,pre 前 post 后 } }], },*/ { test: /.js$/, //普通的loader //不包括node_modules exclude: /node_modules/, use: [{ loader: "babel-loader" }] }, { test: /.html$/, use: ['html-withimg-loader'] }, { test: /.(gif|png|jpg)$/, use: [{ loader: "url-loader", options: { //图片小于10kb就是图片地址,大于正常打包成base64格式编码 limit: 10000, //输出路径 outputPath: 'img/' } }] } ] },};

webpack.base.conf.js主要完成了下面这些事情:

webpack.dev.conf.js:

配置webpack编译入口 配置webpack输出路径和命名规则 配置模块resolve规则 配置不同类型模块的处理规则

//引入webpack-merge插件进行合并const {merge} = require('webpack-merge');//引入webpack.base.conf.js文件const base = require('./webpack.base.conf');//引入webpackconst webpack = require('webpack');//进行合并,将webpack.base.conf.js中的配置合并到这module.exports = merge(base, { //模块参数 mode: 'development', devServer: { contentBase: './dist', //端口号 port: '8383', inline: true, historyApiFallback: true,//在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html hot: true//允许热加载 },//启用source-map方便调试 devtool: 'source-map', plugins: [ //定义全局变量 new webpack.DefinePlugin({ //这里必须要解析成字符串进行判断,不然将会被识别为一个变量 DEV: JSON.stringify('dev') }) ]});

这个配置里面只配置了.js、.vue、图片、字体等几类文件的处理规则,如果需要处理其他文件可以在module.rules里面配置。

webpack.prod.conf.js:

build/webpack.dev.conf.js

const {merge} = require('webpack-merge');const base = require('./webpack.base');const path = require('path');const OptimizeCss = require('optimize-css-assets-webpack-plugin');const UglifyJsPlugin = require('uglifyjs-webpack-plugin');const webpack = require('webpack');module.exports = merge(base, { mode: 'production', optimization: { minimizer: [ //压缩CSS代码 new OptimizeCss(), //压缩js代码 new UglifyJsPlugin({ //启用文件缓存 cache: true, //使用多线程并行运行提高构建速度 parallel: true, //使用 SourceMaps 将错误信息的位置映射到模块 sourceMap: true }) ] }, plugins:[ //使用插件定义全局变量DEV new webpack.DefinePlugin({ DEV:JSON.stringify('production') }) ]});

在webpack.base.conf的基础上增加完善了开发环境下面的配置,主要包括下面几件事情:

最后在配置一下package.json文件就可以了:

将hot-reload相关的代码添加到entry chunks

"scripts": { "test": "npm run test", "dev": "webpack-dev-server --config webpack.dev.js", "build": "webpack --config webpack.prod.js" },

合并基础的webpack配置 使用styleLoaders 配置Source Maps 配置webpack插件

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:Webpack配置区分开发环境和生产环境

关键词: