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