美文网首页
2020-11-27 Develoment 和 Producti

2020-11-27 Develoment 和 Producti

作者: 夏天的风2020 | 来源:发表于2020-11-27 16:30 被阅读0次

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

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

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

    1. 开发环境中，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)
    配置好以后，我们先运行npm run dev进行打包，然后在localhost:8080页面控制台里打印了结果
    image
    之后再运行npm run build进行打包,把dist目录下的index.html放浏览器，也能正常输出
    image

    这就说明了，无论是开发环境还是线上生成环境，我们刚才对配置文件的修改，都是没问题的

    有的时候，有些框架里，会建一个build文件夹，然后把三个配置文件，都放进去
    image

    因为我们移动了这三个文件的位置，所以package.json里要做一下修改,
    当前目录下的build目录下的webpack.dev.js，
    当前目录下的build目录下的webpack.prod.js，

    1.png

    然后我们再去运行打包，还是正常的。

    https://www.jianshu.com/p/dbf8ed21f39c

    相关文章

      网友评论

          本文标题：2020-11-27 Develoment 和 Producti

          本文链接：https://www.haomeiwen.com/subject/eajxwktx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|2020-11-27 Develoment 和 Producti|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！