webpack中Development和Production模式的区分打包

当咱们在开发一个项目的时候，咱们通常用development这个环境进行项目的开发，在这个环境下，webpack使用dev-server，帮咱们启用一个服务器，而后这个服务器里面还集成了一些，好比hmr这样的特性，只要我更改了代码，他会帮咱们从新打包，而后咱们代码的内容会实时的展现在对应的页面上，因此开发环境上，development这样的模式很是的方便，可是一旦咱们的代码开发完成了，咱们须要把咱们的代码打包上线，这个时候主要用刀production模式，那么production模式和development模式差别主要在几个方面。

 

首先在开发环境中，source-map他是很是全的，这样的话能够帮助咱们快递定位问题，可是在production环境下，代码已经要上线了，这个时候source-map并不那么重要了，这个时候的source-map会更佳简洁一些

 

另一点，在开发环境下，咱们的代码不压缩，一旦代码上线，咱们但愿咱们的代码被压缩。

 

因此在开发环境下，咱们webpack.config.js里面

mode: 'development',
devtool: 'cheap-module-eval-source-map',

 

在上线环境下

mode: 'production',
devtool: 'cheap-module-source-map',

 

每次开发上线，咱们须要不断的去更改webpack.config.js的内容，这样就比较麻烦了，要像解决这个问题，咱们这样作，咱们给他改一个名字。开发坏境下咱们使用webpack.dev.js。线上环境用webpack.prod.js。

 

而后在package.json里面配置

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

 

而后开发环境运行npm run dev。打包运行 npm run build

 

咱们发现dev和build存在不少相同的代码。好比entry,modules,output。这样就会出现大量重复代码，为了解决这个问题，咱们新建一个webpack.common.js。把公共的抽出来，抽出来以后，这个时候直接这样确定不行，npm run dev就只有webpack.dev.js这里面的文件。咱们须要跟它们作一个合并。安装

npm install webpack-merge -D

而后webpack.dev.js和webpack.prod.js引入merge模块

 

webpack.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
　　// 这个文件要作打包，从哪个文件开始打包
　　entry: {
　　　　main: './src/index.js'
　　},
　　// 打包模块不知道该怎么办，就去模块配置里面该怎么办
　　module: {
　　　　// 规则
　　　　rules: [{
　　　　　　test: /\.js$/,
　　　　　　// 若是你的这个js文件在node_modules里面，就不使用babel-loader了
　　　　　　exclude: /node_modules/,
　　　　　　loader: 'babel-loader' ,
　　　　},{
　　　　// 假设是以jpg结尾的，我须要一个load帮助咱们去打包
　　　　test: /\.jpg|png|gif$/,
　　　　use: {
　　　　　　loader: 'url-loader',
　　　　　　options: {
　　　　　　　　// 原来是什么名字，打包好仍是什么名字
　　　　　　　　name: '[name]_[hash].[ext]',
　　　　　　　　// 当我碰到jpg,png,gif的时候，打包到根目录下到imgs文件夹里
　　　　　　　　outputPath: 'imgs/',
　　　　　　　　limit: 2048
　　　　　　}
　　　　}
　　},{
　　　　test: /\.eot|ttf|svg|woff$/,
　　　　use: {
　　　　　　loader: 'file-loader'
　　　　}
　　},{
　　　　// 假设是以css结尾的，我须要一个load帮助咱们去打包
　　　　test: /\.scss$/,
　　　　// 须要两个loader，因此不能是个对象，须要是个数组
　　　　use: [
　　　　　　'style-loader',
　　　　　　{
　　　　　　　　loader: 'css-loader',
　　　　　　　　options: {
　　　　　　　　　　importLoaders: 2
　　　　　　　　}
　　　　　　},
　　　　　　'sass-loader',
　　　　　　'postcss-loader'
　　　　]
　　},{
　　　　test: /\.css$/,
　　　　use: [
　　　　　　'style-loader',
　　　　　　'css-loader',
　　　　　　'postcss-loader'
　　　　]
　　}]},
　　// HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中
　　plugins: [
　　　　new HtmlWebpackPlugin({
　　　　　　template: 'src/index.html'
　　　　}),
　　　　new CleanWebpackPlugin()
　　],
　　// 打包文件要放到哪里去，就配置在output这个对象里
　　output: {
　　　　// 打包好的文件名字
　　　　filename: '[name].js',
　　　　/**
　　　　* 打包出的文件要把他放到哪个文件夹下，path后面要放一个绝对路径
　　　　* __dirname指的是webpack.config.js所在的当前目录的这个路径
　　　　* 下面这个结合就是一个绝对路径
　　　　*/
　　　　path: path.resolve(__dirname, 'dist')
　　}
}

 

webpack.dev.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

const devConfig = {
　　/**
　　* 打包模式，不配置会警告，但底层仍是会去配置默认的，就是production
　　* production: 压缩模式，被压缩的代码
　　* development: 开发模式，不压缩的代码
　　*
　　*/
　　mode: 'development',
　　/**
　　* cheap:在生成source-map的时候能够不带列信息，只带行信息就能够了
　　* 同时不要对我load代码的source-map。只要对个人业务代码进行source-map生成
　　* 这种方式提示的错误比较全，打包速度比较快，
　　*/
　　devtool: 'cheap-module-eval-source-map',
 
　　// 起个服务器
　　devServer: {
　　　　// 这个意思是服务器要生成在哪一个文件夹下
　　　　contentBase:'./dist',
　　　　// 启动的时候自动打开浏览器，而后自动访问这个服务器地址
　　　　open:true,
　　　　// 开启Hot Module Replacement
　　　　hot: true
　　},
　　// HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中
　　plugins: [
　　　　new webpack.HotModuleReplacementPlugin()
　　]
}

module.exports = merge(commonConfig, devConfig);

 

 

webpack.prod.js

const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

const prodConfig = {
　　/**
　　* 打包模式，不配置会警告，但底层仍是会去配置默认的，就是production
　　* production: 压缩模式，被压缩的代码
　　* development: 开发模式，不压缩的代码
　　*
　　*/
　　mode: 'production',
　　/**
　　* cheap:在生成source-map的时候能够不带列信息，只带行信息就能够了
　　* 同时不要对我load代码的source-map。只要对个人业务代码进行source-map生成
　　* 这种方式提示的错误比较全，打包速度比较快，
　　*/
　　devtool: 'cheap-module-source-map'
}
module.exports = merge(commonConfig, prodConfig);

 

这样运行npm run dev, npm run build就没有问题了。

 

有时候第三方模块会给webpack进行一个整合，都放到build目录里。这两个时候package.json须要进行一个更改

"scripts": {
　　"dev": "webpack-dev-server --config ./build/webpack.dev.js",
　　"build": "webpack --config ./build/webpack.prod.js",
}