2020-11-27 Develoment 和 Producti

2020-11-27 本文已影响0人夏天的风2020

一、development（开发环境）
当我们在开发项目的时候，一般是用development环境进行项目的开发，在这个打包环境下，webpack中我们使用了devServer可以帮我们启一个服务器，然后这个服务器里还集成了一些HRM（热模块更新）这样的特性。
只要更改了代码，它会帮我们重新打包，然后我们的代码的内容会实时的展示在服务器对应的网页上，所以在开发环境下，我们使用development模式会非常的方便

二、production（生产环境）
一旦我们的源代码开发完成了，需要把代码打包上线，这个时候就需要用production这个模式。

三、production模式和development模式的主要差异

开发环境中，source map是非常全的，这样可以在调试过程中快速定位问题。
而生产环境中的source map不是那么重要了，就可以更加简洁一些，
或者生产环境中的source map我们可以生成一个.map文件来进行存储。

2.开发环境下，我们的代码一般打包生成之后，不需要进行压缩，
因为在开发环境下，我们希望不压缩代码，
可以看到打包生成的内容，
比较明显的看到里边一些具体的说明项；

但是一旦我们的代码要上线，
我们的目标则转向于关注更小的打包生成文件，
更轻量化的 source map，
更优化的资源以改善加载时间。
所以生产环境下打包出的代码一般都是压缩过的。

开发环境(development)和生产环境(production)的构建目标差异很大，
但是截至到现在位置，我们的webpack配置文件只有一个，
那就是 webpack.config.js文件，
当我们在开发环境和生产环境下来回切换进行打包的时候，
我们需要手动的去不停的修改webpack.config.js文件，
这就很麻烦了

比如开发环境下，我们需要修改为如下：

mode: 'development'
devtool:'cheap-module-eval-source-map'
optimization: {
      usedExports: true  
},

当开发完成以后，要打包生成线上文件，切换到生产环境，
我们需要修改为如下：(然后运行npx webpack进行打包)

mode: 'production'
devtool:'cheap-module-source-map'
// optimization: {
//     usedExports: true  
// },

怎么解决？配置不同环境下的配置文件

webpack.dev.js //开发环境下的配置文件
webpack.prod.js //生产环境下的配置文件

把原来的webpack.config.js修改为webpack.dev.js

新增一个生产环境下的配置文件webpack.prod.js,
然后把webpack.dev.js里的代码复制一份过来，然后进行删改；

打包线上的代码，
首先mode要改为 production；
然后 devtool要改为cheap-module-source-map；
然后把devServer删除掉，因为打包生成线上代码的时候，我们只需要生成文件，
上传到线上的服务器上就可以了，
不想要devServer帮我生成一个服务起再启动服务器了；
然后把热更新new webpack.HotModuleReplacementPlugin()也删除掉;
还有就是要把 optimization也删除掉；

生产环境的打包配置文件:

//webpack.prod.js
const path = require('path')   
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack');

module.exports = {
    mode: "production",
    devtool:'cheap-module-source-map',
    entry: {
        main: "./src/index.js"
    },  
    module: {
        rules: [
        {
            test: /\.js$/, 
            exclude: /node_modules/,  
            loader: 'babel-loader'
        },
        {
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 10240
                }
            }
        },
        {
            test: /\.(eot|ttf|svg|woff)$/,
            use: {
                loader: 'file-loader'
            }
        },
        {
            test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2
                        }
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
        },{
            test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new CleanWebpackPlugin()
    ],
    output: {
        path:path.resolve(__dirname,'dist'),   
        filename: '[name].js'   
    }
}

开发环境的打包配置文件如下:

// webpack.dev.js
const path = require('path')    //path是node的核心模块，主要用来操作文件路径
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack');

module.exports = {
    mode: "development",
    devtool:'cheap-module-eval-source-map',
    entry: {
        main: "./src/index.js"
    },  
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,  //让webpack开启  Hot Module Replace 的功能
        hotOnly: true  //即便是  Hot Module Replace 的功能没有生效，也不让浏览器自动重新刷新
    },
    module: {
        rules: [
        {
            test: /\.js$/, 
            exclude: /node_modules/,  
            loader: 'babel-loader'
        },
        {
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 10240
                    //如果打包的图片超10kb的字节的话，就会像file-loader一样，给打包到dist目录下，
                    // 如果不超过，就会以base64形式打包到JS文件里
                }
            }
        },
        {
            test: /\.(eot|ttf|svg|woff)$/,
            use: {
                loader: 'file-loader'
            }
        },
        {
            test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2
                        }
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
        },{
            test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization: {
        usedExports: true  //这个配置的意思是，辨别哪些导出的模块被使用了，我们再进行打包
    },
    output: {
        path:path.resolve(__dirname,'dist'),   
        filename: '[name].js'   
    }
}

优化 package.json文件

之前我们配置的命令是
{
  "name": "lesson",
  "version": "1.0.0",
  "description": "寻找2.0",
  "author": "nobady",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server "
  }
}
运行npm run dev
会调用webpack-dev-server
帮我们启动一个webpack的服务器  
使用哪一个webpck的文件来启这个服务器呢？
来做个配置

{
  "name": "lesson",
  "version": "1.0.0",
  "description": "寻找2.0",
  "author": "nobady",
  "private": true,
  "scripts": {
    //表示的是如果启动一个webpack-dev-server进行开发
    //那么我使用开发环境的webpack配置
    "dev": "webpack-dev-server  --config webpack.dev.js ",
    "build": "webpack-dev-server  --config webpack.prod.js ",
  }
}

当我们运行npm run dev的时候，
会调用webpack-dev-server帮我们启动一个webpack的服务器，
--config webpack.dev.js的意思是，
使用webpack.dev.js这个开发环境的配置文件来帮我们启动这个服务器,


当我们的代码要打包上线的时候，
我们就要用到生产环境下的配置文件去打包了,
运行npm run build的时候，会调用webpack 帮我们打包，
打包的时候是根据webpack.prod.js这个生产环境下的配置文件来打包的,

运行和打包

配置好以后，我们运行npm run dev，
可以看到webpack-dev-server帮我们启动了一个服务器在localhost:8080端口上,
我们在浏览器上打开这个地址，
然后打开控制台，我们的业务代码输出了3，
证明我们打包成功了

去改变业务代码,
刷新页面，就看到输出6,

如果不想手动的刷新页面，把之前配置的hotOnly: true这个配置去掉，
如果没有没有写HMR那一段if(module.hot){...}代码，
那么hot:true会帮我们兜底，
会帮我们重新刷新一下浏览器,
(改变webpack配置，一定要手动重启服务器)

当再次修改业务代码，会看到浏览器会自动刷新并更输出内容,
由此可以看出webpack-dev-server环境下，
我们进行src目录下的源代码的开发会非常的便捷，
我们写的任何的内容，浏览器会马上产生效果，

当完成了开发，要做的就是把代码生成打包后的文件，
npm run build，
把打包生成的文件上传到服务器上，
和后端做结合，
就可以正常运行了，


运行完打包命令后npm run build，
生成的dist文件夹，里边有一个index.html，还有一个main.js和.map文件，
main.js里的代码都已经被压缩过了，
我们把这个dist文件夹丢到线上给后端使用就可以啦，
//-imgs插入

模拟一下，直接在浏览器上打开，打包生成的文件dist目录下的index.html

我们会发现webpack.dev.js和webpack.prod.js这两个配置文件里，有很多相同的代码

image

为了解决这个问题，
我们可以在lesson目录下，创建一个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$/, 
            exclude: /node_modules/,  
            loader: 'babel-loader'
        },
        {
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 10240
                }
            }
        },
        {
            test: /\.(eot|ttf|svg|woff)$/,
            use: {
                loader: 'file-loader'
            }
        },
        {
            test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2
                        }
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
        },{
            test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new CleanWebpackPlugin()
    ],
    output: {
        path:path.resolve(__dirname,'dist'),   
        filename: '[name].js'   
    }
}

拆分之后，webpack.dev.js里现在还剩下如下配置

//webpack.dev.js
const webpack = require('webpack');

module.exports = {
    mode: "development",
    devtool:'cheap-module-eval-source-map',
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,  //让webpack开启  Hot Module Replace 的功能
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization: {
        usedExports: true  
    }
}

webpack.prod.js还剩下如下配置

//webpack.prod.js
module.exports = {
    mode: "production",
    devtool:'cheap-module-source-map'
}

但是，如果仅仅是拆分，肯定是不行的，
我们还需要把webpack.common.js和其他两个配置文件，做一个合并再输出，
怎么做合并呢，
我们需要引入一个第三方模块 webpack-merge

先安装
npm install webpack-merge -D

然后在webpack.dev.js和webpack.prod.js文件里分别引入 webpack-merge，
还要再分别引入webpack.common.js 
最后把结合后的配置文件导出；

最终的webpack.dev.js配置如下

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


const devConfig = {
    mode: "development",
    devtool:'cheap-module-eval-source-map',
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true, 
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization: {
        usedExports: true  
    }
}

//最终导出的是 devConfig 和 commonConfig 结合的配置
module.exports = merge(commonConfig,devConfig)

最终的 webpack.prod.js配置如下

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

const prodConfig = {
    mode: "production",
    devtool:'cheap-module-source-map'
}

//最终导出的是 prodConfig 和 commonConfig 结合的配置
module.exports = merge(commonConfig,prodConfig)