标签：配置 打算 dev js webpack config 我们

写在最前面

本文目的致力于提升自己，帮助那些对于想要提升自己的同学。

要做些什么？

从零搭建一个react开发环境，让自己在实际工作中提升开发效率。

能达到什么效果？

只能这样子说：你可以像如数家珍般说出每一行代码的作用，对于不同的场景可以想改就改，达到自己想要的。

需要具备那些知识点？

基础的webpack知识，react会写就行。

这里说明一点，可能你在按照我的步骤一步一步走下去的时候，如果遇见报错，你最好看一下我项目的package.json文件里面各种库的版本号，有时候不同的版本是有一点差别的。当然你可以使用你自己安装的版本，自己来解决报错问题，你也可以按照我的版本来。其实我希望你使用第一种方法。

那我们就开始吧，嗯开始。

1.先搭建一个简单的环境

关于webpack是什么东西，在此不做阐述，在这里我们使用webpack来小试牛刀一下，以便对后面的知识充满信心。

1.1简单的尝试

1.1.1首先新建一个文件夹（名字随意），初始化一个package.json

在命令行里面打开文件夹，输入npm init，里面需要填写的东西根据自己的实际情况填写,当然也可以输入 npm init -y

现在我们看到文件夹里面生成了一个package.json文件，里面有一些基本的描述信息。

我们讲一下其中main字段的作用

main:可选字段。这个字段的值是你程序主入口模块的ID。如果其他用户需要你的包，当用户调用require()方法时，返回的就是这个模块的导出（exports）。

1.1.2安装webpack和webpack-cli

我们来看看官网是怎么做的：webpack基本安装

1.1.3webpack一下

到了这里我相信，你已经会基础的配置了。不出意外的话我们现在的项目结构如下：

 

在这里我对index.js和index.html里面的内容做了一下修改：

 

 

我相信你现在的package.json文件如下：

 

 好的，我们现在来打包一下：

终端输入: npm run build

如果你是正确的步骤的话，你现在的dist目录下应该有了bundle.js文件，现在把index.html运行到浏览器，你会看见hello，world。

2.webpack配置文件的修改

很好，我们现在有了一次简单的尝试，现在我要做一下修改。我们知道使用了webpack，那么就有环境的区别比如开发环境，生产环境。

2.1.修改配置文件名称

现在我把webpack.config.js重命名为webpack.config.dev.js代表的是开发环境的配置。

修改之后，我们在运行npm run build

你应该会发现dist目录下里面多出了一个main.js文件，里面的内容和我们上次打包得到的bundle.js的内容一样。

我们把index.html中引入的js文件换成main.js，看看效果，很好！还是hello world。

这里的操作可以让我们看到了webpack4.0是不需要配置的，但是它还是可以高度配置的。

2.2 修改打包命令

由于默认的配置，导致我们编写的webpack.config.dev.js文件失效（没有执行里面的配置）。我们需要修改一下打包命令

看这里：

 

这个是上面webpack基础配置里面的一些内容，有了它，我们就可以使用我们自己的配置文件了。

现在修改ackage.json里面的配置文件如下:

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build-dev": "webpack --config webpack.config.dev.js" },

我把之前的build修改为build-dev表示开发环境下打包，后面的命令就可以使用我们自己的配置进行项目打包。

2.3 执行新的打包命令

在此之前我们要把index.html中引入的js还是修改为bundle.js（因为我们之前修改成了main.js）

顺便删除掉dist目录下的bundle.js和index.js（方便验证查看是不是执行的我们配置文件的规则，如果产生main.js则失效，产生bundle.js就成功）。

运行npm run buidl-dev

经过测试，结果正确，只生成了bundle.js。

2.4 为什么需要分环境配置不同的打包规则

我相信，你肯定用过第三方脚手架的，比如vue-cli，在你的项目启动的时候，是不是只需要输入一个地址，就可以在本地访问你的项目。

当然，这要归功于webpack的功劳。毫无疑问，要实现这个功能我们需要下载相关的模块依赖。但是我们打包到生成环境的时候是不需要这个模块的，如果我们把所有的东西都写在一个配置文件，那么最后打包的时候，就会把我们不需要的文件打包进去，造成请求的浪费（当然同一个文件中我们可以使用环境变量在解决）。

我们看一下官方的说明：

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

所以我们需要编写不同环境下的配置文件。

至于如何分环境进行编写，我们先不急，后面会说到。

3.使用webpaack-dev-server

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。这是官方的解释。

简单点说：就是能允许你使用localhost:xxxx的方式，运行你的项目，并且更新代码之后，可以实时重新加载。

3.1 安装并配置webpack-dev-server

npm install webpack-dev-server --save-dev

webpack.config.dev.js中配置如下：

devServer: {
contentBase: './dist'
}

这里的contentBase表示服务启动之后，加载资源的根目录，在这里我们是要访问index.html文件，所以填写./dist。

现在在package.json的scripts中加入如下配置：

"start": "webpack-dev-server --open"

--open表示服务启动的时候可以自动打开浏览器。

运行npm run start，发现如下页面：

 

我们点击dist，加载index.html文，现在可以看到hello，world。

3.2 修改运行命令

我们现在还需要点击一次dist才能看到我们想要的页面，这是一个糟糕的体验。

现在修改命令如下：

"start": "webpack-dev-server --config webpack.config.dev.js --open"

运行npm run start，直接出现了hello world。嗯，很好的体验。

3.3 webpack-dev-server其他配置

webpack-dev-server是高度可配置的，比如我想自己发财，我可以把自己的服务端口号配置成8888。

 devServer: {
    contentBase: './dist',
    port: 8888
  }

我可以配置color和process选项让我的服务启动过程中多一点美感：

"start": "webpack-dev-server --config webpack.config.dev.js --open --color --progress"（在package.json的scripts中添加）。

现在我们只用这么多，后面我们还会使用的。(此处有坑，本来想在这里讲一下的，但是现在是无关痛痒的，留到react路由那部分一起讲)。

更多配置请移步到：webpack-dev-server配置

3.4小补充

使用webpack-dev-server运行起来的项目，其编译的文件是保存在内存中。即使你现在删除bundle.js，运行项目，还是能出来的。

我猜你已经执行了，看hello world。

4.分环境配置webpck配置文件

在2.4我们提到了为什么要分环境配置，在这一节中我们将实现分环境配置，最后把它们整合在一起。

为什么现在开始分环境配置？考虑到后面需要配置的东西越来越多，后面在拆分公共部分会相对于复杂一点，所以我们在配置不多的时候开始分环境配置，以便我们更好的掌握。

如何分？其实就跟我们写代码的时候，把公用的部分封装起来，然后在导入不同的地方实现对应的功能。

4.1下载webpack-merge

遵循不重复原则(Don't repeat yourself - DRY)，保留一个“通用”配置。为了将这些配置合并在一起，我们将使用一个名为 webpack-merge 的工具。通过“通用”配置，我们不必在环境特定(environment-specific)的配置中重复代码。

npm install webpack-merge --save-dev

4.2增加生产环境配置文件和公用的配置文件

现在我们在项目根目录新增两个配置文件

 

 就这样没有任何的魔法。

webpack.common.js文件配置如下： 

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

 webpack.config.dev.js配置如下：

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

module.exports = merge(commonConfig,{
  devServer: {
    contentBase: './dist',
    port: 8888
  }
});

webpack.config.prod.js配置如下：

const merge = require("webpack-merge");
const commonConfig = require("./webpack.common");
module.exports = merge(commonConfig,{});

现在我们把各个环境的配置分离开来，针对不同环境可以进行灵活的配置，这是一个进步。

4.3新增打包命令

在package.json的scripts中新增：

"build": "webpack --config webpack.config.prod.js"

实现在生产环境下打包。

4.4测试一下

现在你可以运行相关命令，测试一下是没有任何问题的。这很好。

5.暂时还不知道写啥子东西

标签：配置,打算,dev,js,webpack,config,我们
来源： https://www.cnblogs.com/jsydb/p/12650562.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。