饮冰三年-人工智能-Vue-67 Webpack

三、Webpack

本篇中的代码已放置到：百度网盘链接：https://pan.baidu.com/s/1I_d_tQL6DoW7BiBxIxR1Lw 提取码：6666

1、认识webpack

　　Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

　　从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

　　我们从两个点来解释上面这句话：模块和打包

　　目前使用前端模块化的一些方案：AMD、CMD、CommonJS、ES6。在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用（在后续我们会看到）。这就是webpack中模块化的概念。　

　　理解了webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就非常好理解了。就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

2、webpack的安装

安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm

npm install webpack -g

安装完成之后别忘了配置环境变量，为了网速和下载方便，可以安装并使用了cnpm（后面有补充）

全局安装与局部安装

局部安装webpack

　　 --save-dev 是开发时依赖，项目打包后不需要继续使用的。

为什么全局安装后，还需要局部安装呢？

　　在终端直接执行webpack命令，使用的全局安装的webpack

　　当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

3、webpack的起步

创建如下文件和文件夹

背景描述：

假设，我们mathUtils.js中有一个两个数求和的方法，我们想通过模块化的方式在main.js 中调用

3.1 首先在mathUtils.js 中写方法，在main.js中使用

// 在公共的js中定义一些个公共方法
function add(num1, num2) {
  return num1 + num2
}

// 这些方法为了能被其他的模块复用，需要将其模块化导出
// 常用的模块化方式（AMDCMDCommonJS）有很多，这里我使用ES6语法

export default add

这里涉及到了模块化的一些知识，可参考 Javascript模块化编程（一）：模块的写法

常用的模块化方式（AMDCMDCommonJS）有很多，这里我使用ES6语法

// 使用ES6语法 导入 mathUtils中的 add 方法
import add from './mathUtils.js'
//main方法中的主体内容，其实就是打印 add 计算结果
console.log(add(11,12));

同时main.js需要引入add

3.2 webpack基本搭建

为了每个项目环境都相对孤立，我进行局部安装webpack。
但是在进行局部安装之前，考虑到npm网速太慢，决定使用cnpm安装

3.2.1 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了 cnpm install [name]　

ps：如果vscode中无法使用cnpm但是在命令行验证cnpm是安装成功的，可以使用
Set-ExecutionPolicy -Scope CurrentUser
在 ExecutionPolicy中输入RemoteSigned

3.2.2 安装局部dev环境的webpack

cnpm install webpack@3.6.0 --save-dev

安装webpack,全局安装的时候用的webpack5.38.1,这里就先用3.6.0

安装完成后，会看到有node_modules 生成

3.2.3 运行webpack，将.srcmain.js 打包到 .distundle.js

npx webpack .srcmain.js  .distundle.js

打包后会在dist文件下，生成一个bundle.js文件文件内容有些复杂，这里暂时先不看，后续再进行分析。

bundle.js文件，是webpack处理了项目直接文件依赖后生成的一个js文件，我们只需要将这个js文件在index.html中引入即可

3.2.3 设置index.html页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>index</title>
</head>
<body>
  <!-- 这里原来只需要导入main.js和mathUtils 就可以了，但是现在不能这样做了（js不认识模块语法，不知道所谓的import、export啥的），必须得通过webpack打包后引用打包后的bundle.js才能运行 -->
  <script src="./dist/bundle.js"></script>
</body>
</html>

　这里原来只需要导入main.js和mathUtils 就可以了，但是现在不能这样做了，因为js不认识模块语法，不知道所谓的import、export。

所以必须得通过webpack打包后，引用打包后的bundle.js才能运行

4、webpack的配置

我们考虑一下，如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时，直接读取呢？

当然可以，就是创建一个webpack.config.js文件

4.1 初始化npm包管理的文件

首先我们通过命令 npm init 生成 npm包管理的文件，也就是 package.json

package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

4.2 创建一个webpack.config.js

const path = require("path") // 动态获取路径

module.exports = {
  entry: "./src/main.js",
  output: {
    path:path.resolve(__dirname,'dist'), //__dirname 表示绝对路径
    filename:"bundle.js"
  }
}

此时，只需要在终端输入webpack即可完成打包

4.3 创建package.json中定义启动

package.json运行逻辑：

package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。

首先，会寻找本地的node_modules/.bin路径中对应的命令。如果没有找到，会去全局的环境变量中寻找

5、loader的使用

loader是webpack中一个非常核心的概念。

在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。

但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。

对于webpack本身的能力来说，对于这些转化是不支持的。那怎么办呢？给webpack扩展对应的loader就可以啦。

loader使用过程：

通过npm安装需要使用的loader
在webpack.config.js中的modules关键字下进行配置

5.1 css文件处理

　　项目开发过程中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。

　　在src目录中，创建一个css文件，其中创建一个normal.css文件。我们也可以重新组织文件的目录结构，将零散的js文件放在一个js文件夹中。

　　normal.css中的代码非常简单，就是将body设置为red

body {
  background-color: red;
}

normal.css

　　但是，这个时候normal.css中的样式会生效吗？当然不会，因为我们压根就没有引用它。

　　好的，接下在我们在main.js引用css

重新打包，会出现如下错误：

这个错误告诉我们：加载normal.css文件必须有对应的loader。

在webpack的官方中，我们可以找到如下关于样式的loader使用方法：

我们这里练习的版本比较老旧，安装的时候最好指定版本，安装css-loader

cnpm install --save-dev css-loader@2.0.2

css-loader只负责将css文件进行加载,style-loader负责将样式添加到DOM中,所以需要下载style-loader

cnpm install --save-dev style-loader@0.23.1

在webpack.config.js 中配置
而且使用多个loader时, webpack在读取使用的loader的过程中，是按照从右向左的顺序读取的，所以 use: [ 'style-loader', 'css-loader' ]，此时，webpack.config.js中的文件内容是这样的

const path = require("path") // 动态获取路径

module.exports = {
  entry: "./src/main.js",
  output: {
    path:path.resolve(__dirname,'dist'), //__dirname 表示绝对路径
    filename:"bundle.js"
  },
  module:{
    rules: [
      {
        test: /.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

webpack.config.js

而package.json中也会多了两个引用

效果展示

5.2 less文件处理

　　如果我们希望在项目中使用less、scss、stylus来写样式，webpack是否可以帮助我们处理呢？我们这里以less为例，其他也是一样的。我们还是先创建一个less文件，依然放在css文件夹中。

@fontSize: 50px;
@fontColor: orange;

body {
  font-size: @fontSize;
  color: @fontColor;
}

special.less

　　且在要在main.js中做引用　　

　　首先，还是需要安装less和对应的loader　　

cnpm install --save-dev less@3.9.0

cnpm install --save-dev less-loader@4.1.0

　　其次，修改对应的配置文件，添加一个rules选项，用于处理.less文件

const path = require("path") // 动态获取路径

module.exports = {
  entry: "./src/main.js",
  output: {
    path:path.resolve(__dirname,'dist'), //__dirname 表示绝对路径
    filename:"bundle.js"
  },
  module:{
    rules: [
      {
        test: /.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      },
    ]
  }
}

special.less

而package.json中也会多了两个引用

效果展示

5.3 图片文件处理

首先，我们在项目中加入两张图片，并放置到以下 src/imgs 文件夹
一张较小的图片test.jpg(11kb)，一张较大的图片timg.jpeg(14kb)
待会儿我们会针对这两张图片进行不同的处理

我们先考虑在css样式中引用图片的情况，所以我更改了normal.css中的样式：

body {
background-color: red;
background: url(../imgs/test.jpg);
}

normal.css

图片处理，我们使用url-loader来处理，依然先安装url-loader

cnpm install --save-dev url-loader@1.1.2

修改webpack.config.js配置文件：

const path = require("path") // 动态获取路径

module.exports = {
  entry: "./src/main.js",
  output: {
    path:path.resolve(__dirname,'dist'), //__dirname 表示绝对路径
    filename:"bundle.js"
  },
  module:{
    rules: [
      {
        test: /.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      },
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
              // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
              limit: 13000,
              
            },
          }
        ]
      },
    ]
  }
}

webpack.config.js

效果展示

那么问题来了，如果大于13kb呢？我们将background的图片改成timg.jpg,

再次build的时候报错

这次因为大于13kb的图片，会通过file-loader进行处理，但是我们的项目中并没有file-loader

所以，我们需要安装file-loader

cnpm install --save-dev file-loader@3.0.1

再次打包，就会发现dist文件夹下多了一个图片文件

我们发现webpack自动帮助我们生成一个非常长的名字这是一个32位hash值，目的是防止名字重复但是，真实开发中，我们可能对打包的图片名字有一定的要求比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复

所以，我们可以在options中添加上如下选项：

img：文件要打包到的文件夹
name：获取图片原来的名字，放在该位置
hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位
ext：使用图片原来的扩展名

但是，我们发现图片并没有显示出来，这是因为图片使用的路径不正确默认情况下，webpack会将生成的路径直接返回给使用者但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下再添加一个dist/

此时的webpack.config.js

const path = require("path") // 动态获取路径

module.exports = {
  entry: "./src/main.js",
  output: {
    path:path.resolve(__dirname,'dist'), //__dirname 表示绝对路径
    filename:"bundle.js",
    publicPath:'dist/'
  },
  module:{
    rules: [
      {
        test: /.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      },
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
              // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
              limit: 13000,
              name: 'imgs/[name].[hash:8].[ext]'
            },
          }
        ]
      },
    ]
  }
}

webpack.config.js

5.4 ES6语法处理

如果你仔细阅读webpack打包的js文件，发现写的ES6语法并没有转成ES5，那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码。

如果希望将ES6的语法转成ES5，那么就需要使用babel。

首先，需要安装loader

cnpm install --save-dev babel-loader@7 babel-core babel-preset-es2015

接着、配置webpack.config.js　　

const path = require("path") // 动态获取路径

module.exports = {
  entry: "./src/main.js",
  output: {
    path:path.resolve(__dirname,'dist'), //__dirname 表示绝对路径
    filename:"bundle.js",
    publicPath:'dist/'
  },
  module:{
    rules: [
      {
        test: /.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      },
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
              // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
              limit: 13000,
              name: 'imgs/[name].[hash:8].[ext]'
            },
          }
        ]
      },
      {
        test: /.js$/,
        // exclude: 排除
        // include: 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
    ]
  }
}

webpack.config.js

效果展示

6、webpack中配置Vue

6.1 webpack + vue 初体验

我们会使用Vuejs进行开发，而且会以特殊的文件来组织vue的组件。所以，下面我们来学习一下如何在我们的webpack环境中集成Vuejs

现在，我们希望在项目中使用Vuejs，那么必然需要对其有依赖，所以需要先进行安装

因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖

cnpm install vue --save

接下来就可以按照我们之前学习的方式来使用Vue了

修改完成后，重新打包，运行程序：
但是运行程序，没有出现想要的效果，而且浏览器中有报错

我们修改webpack的配置，添加如下内容即可

效果展示

6.2 template属性

正常运行之后，我们来考虑另外一个问题：

如果我们希望将data中的数据显示在界面中，就必须是修改index.html
如果我们后面自定义了组件，也必须修改index.html来使用组件
但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到呢？

通过template属性，替换index.html中的内容

效果展示

el和template模板的关系是什么呢

在我们之前的学习中，我们知道el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等。
而如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。

这样做有什么好处呢

　　这样做之后我们就不需要在以后的开发中再次操作index.html，只需要在template中写入对应的标签即可

6.2 Vue组件化开发引入

在学习组件化开发的时候，我说过以后的Vue开发过程中，我们都会采用组件化开发的思想。

总结一个规律：一安二改三使用

1：安装vue-loader和vue-template-compiler

cnpm install vue-loader@13.0.0 vue-template-compiler@2.5.21--save-dev

2：修改webpack.config.js的配置文件

const path = require("path") // 动态获取路径

module.exports = {
  entry: "./src/main.js",
  output: {
    path:path.resolve(__dirname,'dist'), //__dirname 表示绝对路径
    filename:"bundle.js",
    publicPath:'dist/'
  },
  module:{
    rules: [
      {
        test: /.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      },
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
              // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
              limit: 13000,
              name: 'imgs/[name].[hash:8].[ext]'
            },
          }
        ]
      },
      {
        test: /.js$/,
        // exclude: 排除
        // include: 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    // alias: 别名
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

webpack.config.js

3:创建Vue文件夹，并添加App.vue文件

<template>
  <div class="title">
    {{ message }}
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { message: "Hello Webpack" };
  },
 
};
</script>

<style scoped>
  .title {
    color: green;
  }
</style>

App.vue

效果展示

4:拓展，此时如果想要再插入一个子组件

a、先添加一个Cpn.vue

<template>
  <div class="title">
    {{ message }}
    <Cpn></Cpn>
  </div>
</template>

<script>
import Cpn from './Cpn.vue'
export default {
  name: "App",
  data() {
    return { message: "Hello Webpack" };
  },
  components:{
    Cpn
  }
 
};
</script>

<style scoped>
  .title {
    color: green;
  }
</style>

Cpn.vue

b、在App.vue中做引用和子组件

<template>
  <div class="title">
    {{ message }}
    <Cpn></Cpn>
  </div>
</template>

<script>
import Cpn from './Cpn.vue'
export default {
  name: "App",
  data() {
    return { message: "Hello Webpack" };
  },
  components:{
    Cpn
  }
 
};
</script>

<style scoped>
  .title {
    color: green;
  }
</style>

App.vue

这里不用在修改index.html以及mian.js直接展示

7、plugin的使用

7.1 初识plugin

plugin是什么？

plugin是插件的意思，通常是用于对某个现有的架构进行扩展。
webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。

loader和plugin区别

loader主要用于转换某些类型的模块，它是一个转换器。
plugin是插件，它是对webpack本身的扩展，是一个扩展器。

plugin的使用过程：

步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二：在webpack.config.js中的plugins中配置插件。

7.2 添加版权的Plugin

　　该插件名字叫BannerPlugin，属于webpack自带的插件。

按照下面的方式来修改webpack.config.js的文件：

7.3 打包html的Plugin

目前，我们的index.html文件是存放在项目的根目录下的。

我们知道，在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。
所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件

HtmlWebpackPlugin插件可以为我们做这些事情：

自动生成一个index.html文件(可以指定模板来生成) 将打包的js文件，
自动通过script标签插入到body中

老流程：一安二改三使用

安装HtmlWebpackPlugin插件

cnpm install html-webpack-plugin@3.2.0 --save-dev

使用插件，修改webpack.config.js文件中plugins部分的内容如下：

　　这里的template表示根据什么模板来生成index.html 另外，

　　我们需要删除之前在output中添加的publicPath属性，否则插入的script标签中的src可能会有问题

7.3 js压缩的Plugin

在项目发布之前，我们必然需要对js等文件进行压缩处理

我们使用一个第三方的插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致

cnpm install uglifyjs-webpack-plugin@1.1.1 --save-dev

修改webpack.config.js文件，使用插件

8、搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

老流程：一安二改三使用

它是一个单独的模块，在webpack中使用之前需要先安装它

npm install --save-dev webpack-dev-server@2.9.1

二修改配置　　

devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：

contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
port：端口号
inline：页面实时刷新
historyApiFallback：在SPA页面中，依赖HTML5的history模式

const HtmlWebpackPlugin = require("html-webpack-plugin")
const path = require("path") // 动态获取路径
const webpack = require("webpack")
const uglifyJsPlugin = require("uglifyjs-webpack-plugin")


module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, 'dist'), //__dirname 表示绝对路径
    filename: "bundle.js",
    // publicPath:'dist/'
  },
  module: {
    rules: [{
        test: /.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: ['style-loader', 'css-loader']
      },
      {
        test: /.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      },
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
            // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
            limit: 13000,
            name: 'imgs/[name].[hash:8].[ext]'
          },
        }]
      },
      {
        test: /.js$/,
        // exclude: 排除
        // include: 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    // alias: 别名
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin('最终版权归我所有'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    new uglifyJsPlugin()
  ],
  devServer: {
    contentBase: './dist',
    inline: true //
  }
}

webpack.config.js

同时还需要修改package.json中的内容

展示效果

9、webpack配置分离（三家分晋）

现在生产环境和开发环境的配置全在一个webpack.config.js 中。

例如 js 代码压缩的应该属于生产环境，而在本地搭建的devServer:应该数据开发环境

我们要做的就是把webpack.config.js中公共的抽取到base.config.js,各自分配放到dev.config.js和prod.config.js

一、安装

cnpm install --save-dev webpack-merge@4.1.5

二、该配置

注意：base.config.js 中path稍加调整path.resolve(__dirname, '../dist')

const HtmlWebpackPlugin = require("html-webpack-plugin")
const path = require("path") // 动态获取路径
const webpack = require("webpack")
const uglifyJsPlugin = require("uglifyjs-webpack-plugin")


module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, '../dist'), //__dirname 表示绝对路径
    filename: "bundle.js",
    // publicPath:'dist/'
  },
  module: {
    rules: [{
        test: /.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: ['style-loader', 'css-loader']
      },
      {
        test: /.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      },
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
            // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
            limit: 13000,
            name: 'imgs/[name].[hash:8].[ext]'
          },
        }]
      },
      {
        test: /.js$/,
        // exclude: 排除
        // include: 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    // alias: 别名
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin('最终版权归我所有'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ] 
}

base.config.js

const webpackMerge = require('webpack-merge') //合并：base.config.js + webpack-merge
const baseConfig = require('./base.config')   //引入base.config文件

module.exports = webpackMerge(baseConfig, {
  devServer: {
    contentBase: './dist',
    inline: true
  }
})

dev.config.js

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge') //合并：base.config.js + webpack-merge
const baseConfig = require('./base.config')   //引入base.config文件

module.exports = webpackMerge(baseConfig, {
  plugins: [
    new UglifyjsWebpackPlugin()
  ]
})

prod.config.js

三、修改package.json中scripts配置

{
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^2.0.2",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.5.21",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.5"
  },
  "name": "meetwebpack",
  "description": "为了每个项目环境都相对孤立，我进行局部安装webpack。
 但是在进行局部安装之前，考虑到npm网速太慢，决定使用cnpm安装",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "dependencies": {
    "_acorn-dynamic-import@2.0.2@acorn-dynamic-import": "^2.0.2",
    "_acorn@4.0.13@acorn": "^4.0.13",
    "_acorn@5.7.4@acorn": "^5.7.4",
    "_ajv-keywords@2.1.1@ajv-keywords": "^2.1.1",
    "_ajv@5.5.2@ajv": "^5.5.2",
    "_align-text@0.1.4@align-text": "^0.1.4",
    "_ansi-regex@2.1.1@ansi-regex": "^2.1.1",
    "_ansi-regex@3.0.0@ansi-regex": "^3.0.0",
    "_anymatch@2.0.0@anymatch": "^2.0.0",
    "_anymatch@3.1.2@anymatch": "^3.1.2",
    "_arr-diff@4.0.0@arr-diff": "^4.0.0",
    "_arr-flatten@1.1.0@arr-flatten": "^1.1.0",
    "_arr-union@3.1.0@arr-union": "^3.1.0",
    "_array-unique@0.3.2@array-unique": "^0.3.2",
    "_asn1.js@5.4.1@asn1.js": "^5.4.1",
    "_assert@1.5.0@assert": "^1.5.0",
    "_assign-symbols@1.0.0@assign-symbols": "^1.0.0",
    "_async-each@1.0.3@async-each": "^1.0.3",
    "_async@2.6.3@async": "^2.6.3",
    "_atob@2.1.2@atob": "^2.1.2",
    "_base64-js@1.5.1@base64-js": "^1.5.1",
    "_base@0.11.2@base": "^0.11.2",
    "_big.js@5.2.2@big.js": "^5.2.2",
    "_binary-extensions@1.13.1@binary-extensions": "^1.13.1",
    "_binary-extensions@2.2.0@binary-extensions": "^2.2.0",
    "_bn.js@4.12.0@bn.js": "^4.12.0",
    "_bn.js@5.2.0@bn.js": "^5.2.0",
    "_braces@2.3.2@braces": "^2.3.2",
    "_braces@3.0.2@braces": "^3.0.2",
    "_brorand@1.1.0@brorand": "^1.1.0",
    "_browserify-aes@1.2.0@browserify-aes": "^1.2.0",
    "_browserify-cipher@1.0.1@browserify-cipher": "^1.0.1",
    "_browserify-des@1.0.2@browserify-des": "^1.0.2",
    "_browserify-rsa@4.1.0@browserify-rsa": "^4.1.0",
    "_browserify-sign@4.2.1@browserify-sign": "^4.2.1",
    "_browserify-zlib@0.2.0@browserify-zlib": "^0.2.0",
    "_buffer-xor@1.0.3@buffer-xor": "^1.0.3",
    "_buffer@4.9.2@buffer": "^4.9.2",
    "_builtin-status-codes@3.0.0@builtin-status-codes": "^3.0.0",
    "_cache-base@1.0.1@cache-base": "^1.0.1",
    "_camelcase@1.2.1@camelcase": "^1.2.1",
    "_camelcase@4.1.0@camelcase": "^4.1.0",
    "_center-align@0.1.3@center-align": "^0.1.3",
    "_chokidar@2.1.8@chokidar": "^2.1.8",
    "_chokidar@3.5.1@chokidar": "^3.5.1",
    "_cipher-base@1.0.4@cipher-base": "^1.0.4",
    "_class-utils@0.3.6@class-utils": "^0.3.6",
    "_cliui@2.1.0@cliui": "^2.1.0",
    "_cliui@3.2.0@cliui": "^3.2.0",
    "_co@4.6.0@co": "^4.6.0",
    "_code-point-at@1.1.0@code-point-at": "^1.1.0",
    "_collection-visit@1.0.0@collection-visit": "^1.0.0",
    "_component-emitter@1.3.0@component-emitter": "^1.3.0",
    "_console-browserify@1.2.0@console-browserify": "^1.2.0",
    "_constants-browserify@1.0.0@constants-browserify": "^1.0.0",
    "_copy-descriptor@0.1.1@copy-descriptor": "^0.1.1",
    "_core-util-is@1.0.2@core-util-is": "^1.0.2",
    "_create-ecdh@4.0.4@create-ecdh": "^4.0.4",
    "_create-hash@1.2.0@create-hash": "^1.2.0",
    "_create-hmac@1.1.7@create-hmac": "^1.1.7",
    "_cross-spawn@5.1.0@cross-spawn": "^5.1.0",
    "_crypto-browserify@3.12.0@crypto-browserify": "^3.12.0",
    "_d@1.0.1@d": "^1.0.1",
    "_debug@2.6.9@debug": "^2.6.9",
    "_decamelize@1.2.0@decamelize": "^1.2.0",
    "_decode-uri-component@0.2.0@decode-uri-component": "^0.2.0",
    "_define-property@0.2.5@define-property": "^0.2.5",
    "_define-property@1.0.0@define-property": "^1.0.0",
    "_define-property@2.0.2@define-property": "^2.0.2",
    "_des.js@1.0.1@des.js": "^1.0.1",
    "_diffie-hellman@5.0.3@diffie-hellman": "^5.0.3",
    "_domain-browser@1.2.0@domain-browser": "^1.2.0",
    "_elliptic@6.5.4@elliptic": "^6.5.4",
    "_emojis-list@3.0.0@emojis-list": "^3.0.0",
    "_enhanced-resolve@3.4.1@enhanced-resolve": "^3.4.1",
    "_errno@0.1.8@errno": "^0.1.8",
    "_error-ex@1.3.2@error-ex": "^1.3.2",
    "_es5-ext@0.10.53@es5-ext": "^0.10.53",
    "_es6-iterator@2.0.3@es6-iterator": "^2.0.3",
    "_es6-map@0.1.5@es6-map": "^0.1.5",
    "_es6-set@0.1.5@es6-set": "^0.1.5",
    "_es6-symbol@3.1.1@es6-symbol": "^3.1.1",
    "_es6-symbol@3.1.3@es6-symbol": "^3.1.3",
    "_es6-weak-map@2.0.3@es6-weak-map": "^2.0.3",
    "_escope@3.6.0@escope": "^3.6.0",
    "_esrecurse@4.3.0@esrecurse": "^4.3.0",
    "_estraverse@4.3.0@estraverse": "^4.3.0",
    "_estraverse@5.2.0@estraverse": "^5.2.0",
    "_event-emitter@0.3.5@event-emitter": "^0.3.5",
    "_events@3.3.0@events": "^3.3.0",
    "_evp_bytestokey@1.0.3@evp_bytestokey": "^1.0.3",
    "_execa@0.7.0@execa": "^0.7.0",
    "_expand-brackets@2.1.4@expand-brackets": "^2.1.4",
    "_ext@1.4.0@ext": "^1.4.0",
    "_extend-shallow@2.0.1@extend-shallow": "^2.0.1",
    "_extend-shallow@3.0.2@extend-shallow": "^3.0.2",
    "_extglob@2.0.4@extglob": "^2.0.4",
    "_fast-deep-equal@1.1.0@fast-deep-equal": "^1.1.0",
    "_fast-json-stable-stringify@2.1.0@fast-json-stable-stringify": "^2.1.0",
    "_fill-range@4.0.0@fill-range": "^4.0.0",
    "_fill-range@7.0.1@fill-range": "^7.0.1",
    "_find-up@2.1.0@find-up": "^2.1.0",
    "_for-in@1.0.2@for-in": "^1.0.2",
    "_fragment-cache@0.2.1@fragment-cache": "^0.2.1",
    "_fsevents@1.2.13@fsevents": "^1.2.13",
    "_fsevents@2.3.2@fsevents": "^2.3.2",
    "_function-bind@1.1.1@function-bind": "^1.1.1",
    "_get-caller-file@1.0.3@get-caller-file": "^1.0.3",
    "_get-stream@3.0.0@get-stream": "^3.0.0",
    "_get-value@2.0.6@get-value": "^2.0.6",
    "_glob-parent@3.1.0@glob-parent": "^3.1.0",
    "_glob-parent@5.1.2@glob-parent": "^5.1.2",
    "_graceful-fs@4.2.6@graceful-fs": "^4.2.6",
    "_has-flag@2.0.0@has-flag": "^2.0.0",
    "_has-value@0.3.1@has-value": "^0.3.1",
    "_has-value@1.0.0@has-value": "^1.0.0",
    "_has-values@0.1.4@has-values": "^0.1.4",
    "_has-values@1.0.0@has-values": "^1.0.0",
    "_has@1.0.3@has": "^1.0.3",
    "_hash-base@3.1.0@hash-base": "^3.1.0",
    "_hash.js@1.1.7@hash.js": "^1.1.7",
    "_hmac-drbg@1.0.1@hmac-drbg": "^1.0.1",
    "_hosted-git-info@2.8.9@hosted-git-info": "^2.8.9",
    "_https-browserify@1.0.0@https-browserify": "^1.0.0",
    "_ieee754@1.2.1@ieee754": "^1.2.1",
    "_inherits@2.0.1@inherits": "^2.0.1",
    "_inherits@2.0.3@inherits": "^2.0.3",
    "_inherits@2.0.4@inherits": "^2.0.4",
    "_interpret@1.4.0@interpret": "^1.4.0",
    "_invert-kv@1.0.0@invert-kv": "^1.0.0",
    "_is-accessor-descriptor@0.1.6@is-accessor-descriptor": "^0.1.6",
    "_is-accessor-descriptor@1.0.0@is-accessor-descriptor": "^1.0.0",
    "_is-arrayish@0.2.1@is-arrayish": "^0.2.1",
    "_is-binary-path@1.0.1@is-binary-path": "^1.0.1",
    "_is-binary-path@2.1.0@is-binary-path": "^2.1.0",
    "_is-buffer@1.1.6@is-buffer": "^1.1.6",
    "_is-core-module@2.4.0@is-core-module": "^2.4.0",
    "_is-data-descriptor@0.1.4@is-data-descriptor": "^0.1.4",
    "_is-data-descriptor@1.0.0@is-data-descriptor": "^1.0.0",
    "_is-descriptor@0.1.6@is-descriptor": "^0.1.6",
    "_is-descriptor@1.0.2@is-descriptor": "^1.0.2",
    "_is-extendable@0.1.1@is-extendable": "^0.1.1",
    "_is-extendable@1.0.1@is-extendable": "^1.0.1",
    "_is-extglob@2.1.1@is-extglob": "^2.1.1",
    "_is-fullwidth-code-point@1.0.0@is-fullwidth-code-point": "^1.0.0",
    "_is-fullwidth-code-point@2.0.0@is-fullwidth-code-point": "^2.0.0",
    "_is-glob@3.1.0@is-glob": "^3.1.0",
    "_is-glob@4.0.1@is-glob": "^4.0.1",
    "_is-number@3.0.0@is-number": "^3.0.0",
    "_is-number@7.0.0@is-number": "^7.0.0",
    "_is-plain-object@2.0.4@is-plain-object": "^2.0.4",
    "_is-stream@1.1.0@is-stream": "^1.1.0",
    "_is-windows@1.0.2@is-windows": "^1.0.2",
    "_isarray@1.0.0@isarray": "^1.0.0",
    "_isexe@2.0.0@isexe": "^2.0.0",
    "_isobject@2.1.0@isobject": "^2.1.0",
    "_isobject@3.0.1@isobject": "^3.0.1",
    "_json-loader@0.5.7@json-loader": "^0.5.7",
    "_json-schema-traverse@0.3.1@json-schema-traverse": "^0.3.1",
    "_json5@0.5.1@json5": "^0.5.1",
    "_json5@1.0.1@json5": "^1.0.1",
    "_kind-of@3.2.2@kind-of": "^3.2.2",
    "_kind-of@4.0.0@kind-of": "^4.0.0",
    "_kind-of@5.1.0@kind-of": "^5.1.0",
    "_kind-of@6.0.3@kind-of": "^6.0.3",
    "_lazy-cache@1.0.4@lazy-cache": "^1.0.4",
    "_lcid@1.0.0@lcid": "^1.0.0",
    "_load-json-file@2.0.0@load-json-file": "^2.0.0",
    "_loader-runner@2.4.0@loader-runner": "^2.4.0",
    "_loader-utils@1.4.0@loader-utils": "^1.4.0",
    "_locate-path@2.0.0@locate-path": "^2.0.0",
    "_lodash@4.17.21@lodash": "^4.17.21",
    "_longest@1.0.1@longest": "^1.0.1",
    "_lru-cache@4.1.5@lru-cache": "^4.1.5",
    "_map-cache@0.2.2@map-cache": "^0.2.2",
    "_map-visit@1.0.0@map-visit": "^1.0.0",
    "_md5.js@1.3.5@md5.js": "^1.3.5",
    "_mem@1.1.0@mem": "^1.1.0",
    "_memory-fs@0.4.1@memory-fs": "^0.4.1",
    "_micromatch@3.1.10@micromatch": "^3.1.10",
    "_miller-rabin@4.0.1@miller-rabin": "^4.0.1",
    "_mimic-fn@1.2.0@mimic-fn": "^1.2.0",
    "_minimalistic-assert@1.0.1@minimalistic-assert": "^1.0.1",
    "_minimalistic-crypto-utils@1.0.1@minimalistic-crypto-utils": "^1.0.1",
    "_minimist@1.2.5@minimist": "^1.2.5",
    "_mixin-deep@1.3.2@mixin-deep": "^1.3.2",
    "_mkdirp@0.5.5@mkdirp": "^0.5.5",
    "_ms@2.0.0@ms": "^2.0.0",
    "_nanomatch@1.2.13@nanomatch": "^1.2.13",
    "_neo-async@2.6.2@neo-async": "^2.6.2",
    "_next-tick@1.0.0@next-tick": "^1.0.0",
    "_node-libs-browser@2.2.1@node-libs-browser": "^2.2.1",
    "_normalize-package-data@2.5.0@normalize-package-data": "^2.5.0",
    "_normalize-path@2.1.1@normalize-path": "^2.1.1",
    "_normalize-path@3.0.0@normalize-path": "^3.0.0",
    "_npm-run-path@2.0.2@npm-run-path": "^2.0.2",
    "_number-is-nan@1.0.1@number-is-nan": "^1.0.1",
    "_object-assign@4.1.1@object-assign": "^4.1.1",
    "_object-copy@0.1.0@object-copy": "^0.1.0",
    "_object-visit@1.0.1@object-visit": "^1.0.1",
    "_object.pick@1.3.0@object.pick": "^1.3.0",
    "_os-browserify@0.3.0@os-browserify": "^0.3.0",
    "_os-locale@2.1.0@os-locale": "^2.1.0",
    "_p-finally@1.0.0@p-finally": "^1.0.0",
    "_p-limit@1.3.0@p-limit": "^1.3.0",
    "_p-locate@2.0.0@p-locate": "^2.0.0",
    "_p-try@1.0.0@p-try": "^1.0.0",
    "_pako@1.0.11@pako": "^1.0.11",
    "_parse-asn1@5.1.6@parse-asn1": "^5.1.6",
    "_parse-json@2.2.0@parse-json": "^2.2.0",
    "_pascalcase@0.1.1@pascalcase": "^0.1.1",
    "_path-browserify@0.0.1@path-browserify": "^0.0.1",
    "_path-dirname@1.0.2@path-dirname": "^1.0.2",
    "_path-exists@3.0.0@path-exists": "^3.0.0",
    "_path-is-absolute@1.0.1@path-is-absolute": "^1.0.1",
    "_path-key@2.0.1@path-key": "^2.0.1",
    "_path-parse@1.0.7@path-parse": "^1.0.7",
    "_path-type@2.0.0@path-type": "^2.0.0",
    "_pbkdf2@3.1.2@pbkdf2": "^3.1.2",
    "_picomatch@2.3.0@picomatch": "^2.3.0",
    "_pify@2.3.0@pify": "^2.3.0",
    "_posix-character-classes@0.1.1@posix-character-classes": "^0.1.1",
    "_process-nextick-args@2.0.1@process-nextick-args": "^2.0.1",
    "_process@0.11.10@process": "^0.11.10",
    "_prr@1.0.1@prr": "^1.0.1",
    "_pseudomap@1.0.2@pseudomap": "^1.0.2",
    "_public-encrypt@4.0.3@public-encrypt": "^4.0.3",
    "_punycode@1.3.2@punycode": "^1.3.2",
    "_punycode@1.4.1@punycode": "^1.4.1",
    "_querystring-es3@0.2.1@querystring-es3": "^0.2.1",
    "_querystring@0.2.0@querystring": "^0.2.0",
    "_randombytes@2.1.0@randombytes": "^2.1.0",
    "_randomfill@1.0.4@randomfill": "^1.0.4",
    "_read-pkg-up@2.0.0@read-pkg-up": "^2.0.0",
    "_read-pkg@2.0.0@read-pkg": "^2.0.0",
    "_readable-stream@2.3.7@readable-stream": "^2.3.7",
    "_readable-stream@3.6.0@readable-stream": "^3.6.0",
    "_readdirp@2.2.1@readdirp": "^2.2.1",
    "_readdirp@3.5.0@readdirp": "^3.5.0",
    "_regex-not@1.0.2@regex-not": "^1.0.2",
    "_remove-trailing-separator@1.1.0@remove-trailing-separator": "^1.1.0",
    "_repeat-element@1.1.4@repeat-element": "^1.1.4",
    "_repeat-string@1.6.1@repeat-string": "^1.6.1",
    "_require-directory@2.1.1@require-directory": "^2.1.1",
    "_require-main-filename@1.0.1@require-main-filename": "^1.0.1",
    "_resolve-url@0.2.1@resolve-url": "^0.2.1",
    "_resolve@1.20.0@resolve": "^1.20.0",
    "_ret@0.1.15@ret": "^0.1.15",
    "_right-align@0.1.3@right-align": "^0.1.3",
    "_ripemd160@2.0.2@ripemd160": "^2.0.2",
    "_safe-buffer@5.1.2@safe-buffer": "^5.1.2",
    "_safe-buffer@5.2.1@safe-buffer": "^5.2.1",
    "_safe-regex@1.1.0@safe-regex": "^1.1.0",
    "_safer-buffer@2.1.2@safer-buffer": "^2.1.2",
    "_semver@5.7.1@semver": "^5.7.1",
    "_set-blocking@2.0.0@set-blocking": "^2.0.0",
    "_set-value@2.0.1@set-value": "^2.0.1",
    "_setimmediate@1.0.5@setimmediate": "^1.0.5",
    "_sha.js@2.4.11@sha.js": "^2.4.11",
    "_shebang-command@1.2.0@shebang-command": "^1.2.0",
    "_shebang-regex@1.0.0@shebang-regex": "^1.0.0",
    "_signal-exit@3.0.3@signal-exit": "^3.0.3",
    "_snapdragon-node@2.1.1@snapdragon-node": "^2.1.1",
    "_snapdragon-util@3.0.1@snapdragon-util": "^3.0.1",
    "_snapdragon@0.8.2@snapdragon": "^0.8.2",
    "_source-list-map@2.0.1@source-list-map": "^2.0.1",
    "_source-map-resolve@0.5.3@source-map-resolve": "^0.5.3",
    "_source-map-url@0.4.1@source-map-url": "^0.4.1",
    "_source-map@0.5.7@source-map": "^0.5.7",
    "_source-map@0.6.1@source-map": "^0.6.1",
    "_spdx-correct@3.1.1@spdx-correct": "^3.1.1",
    "_spdx-exceptions@2.3.0@spdx-exceptions": "^2.3.0",
    "_spdx-expression-parse@3.0.1@spdx-expression-parse": "^3.0.1",
    "_spdx-license-ids@3.0.9@spdx-license-ids": "^3.0.9",
    "_split-string@3.1.0@split-string": "^3.1.0",
    "_static-extend@0.1.2@static-extend": "^0.1.2",
    "_stream-browserify@2.0.2@stream-browserify": "^2.0.2",
    "_stream-http@2.8.3@stream-http": "^2.8.3",
    "_string-width@1.0.2@string-width": "^1.0.2",
    "_string-width@2.1.1@string-width": "^2.1.1",
    "_string_decoder@1.1.1@string_decoder": "^1.1.1",
    "_string_decoder@1.3.0@string_decoder": "^1.3.0",
    "_strip-ansi@3.0.1@strip-ansi": "^3.0.1",
    "_strip-ansi@4.0.0@strip-ansi": "^4.0.0",
    "_strip-bom@3.0.0@strip-bom": "^3.0.0",
    "_strip-eof@1.0.0@strip-eof": "^1.0.0",
    "_supports-color@4.5.0@supports-color": "^4.5.0",
    "_tapable@0.2.9@tapable": "^0.2.9",
    "_timers-browserify@2.0.12@timers-browserify": "^2.0.12",
    "_to-arraybuffer@1.0.1@to-arraybuffer": "^1.0.1",
    "_to-object-path@0.3.0@to-object-path": "^0.3.0",
    "_to-regex-range@2.1.1@to-regex-range": "^2.1.1",
    "_to-regex-range@5.0.1@to-regex-range": "^5.0.1",
    "_to-regex@3.0.2@to-regex": "^3.0.2",
    "_tty-browserify@0.0.0@tty-browserify": "^0.0.0",
    "_type@1.2.0@type": "^1.2.0",
    "_type@2.5.0@type": "^2.5.0",
    "_uglify-js@2.8.29@uglify-js": "^2.8.29",
    "_uglify-to-browserify@1.0.2@uglify-to-browserify": "^1.0.2",
    "_uglifyjs-webpack-plugin@0.4.6@uglifyjs-webpack-plugin": "^0.4.6",
    "_union-value@1.0.1@union-value": "^1.0.1",
    "_unset-value@1.0.0@unset-value": "^1.0.0",
    "_upath@1.2.0@upath": "^1.2.0",
    "_urix@0.1.0@urix": "^0.1.0",
    "_url@0.11.0@url": "^0.11.0",
    "_use@3.1.1@use": "^3.1.1",
    "_util-deprecate@1.0.2@util-deprecate": "^1.0.2",
    "_util@0.10.3@util": "^0.10.3",
    "_util@0.11.1@util": "^0.11.1",
    "_validate-npm-package-license@3.0.4@validate-npm-package-license": "^3.0.4",
    "_vm-browserify@1.1.2@vm-browserify": "^1.1.2",
    "_watchpack-chokidar2@2.0.1@watchpack-chokidar2": "^2.0.1",
    "_watchpack@1.7.5@watchpack": "^1.7.5",
    "_webpack-sources@1.4.3@webpack-sources": "^1.4.3",
    "_webpack@3.6.0@webpack": "^3.6.0",
    "_which-module@2.0.0@which-module": "^2.0.0",
    "_which@1.3.1@which": "^1.3.1",
    "_window-size@0.1.0@window-size": "^0.1.0",
    "_wordwrap@0.0.2@wordwrap": "^0.0.2",
    "_wrap-ansi@2.1.0@wrap-ansi": "^2.1.0",
    "_xtend@4.0.2@xtend": "^4.0.2",
    "_y18n@3.2.2@y18n": "^3.2.2",
    "_yallist@2.1.2@yallist": "^2.1.2",
    "_yargs-parser@7.0.0@yargs-parser": "^7.0.0",
    "_yargs@3.10.0@yargs": "^3.10.0",
    "_yargs@8.0.2@yargs": "^8.0.2",
    "acorn": "^5.7.4",
    "acorn-dynamic-import": "^2.0.2",
    "ajv": "^5.5.2",
    "ajv-keywords": "^2.1.1",
    "align-text": "^0.1.4",
    "ansi-regex": "^3.0.0",
    "anymatch": "^3.1.2",
    "arr-diff": "^4.0.0",
    "arr-flatten": "^1.1.0",
    "arr-union": "^3.1.0",
    "array-unique": "^0.3.2",
    "asn1.js": "^5.4.1",
    "assert": "^1.5.0",
    "assign-symbols": "^1.0.0",
    "async": "^2.6.3",
    "async-each": "^1.0.3",
    "atob": "^2.1.2",
    "base": "^0.11.2",
    "base64-js": "^1.5.1",
    "big.js": "^5.2.2",
    "binary-extensions": "^2.2.0",
    "bn.js": "^5.2.0",
    "braces": "^3.0.2",
    "brorand": "^1.1.0",
    "browserify-aes": "^1.2.0",
    "browserify-cipher": "^1.0.1",
    "browserify-des": "^1.0.2",
    "browserify-rsa": "^4.1.0",
    "browserify-sign": "^4.2.1",
    "browserify-zlib": "^0.2.0",
    "buffer": "^4.9.2",
    "buffer-xor": "^1.0.3",
    "builtin-status-codes": "^3.0.0",
    "cache-base": "^1.0.1",
    "camelcase": "^4.1.0",
    "center-align": "^0.1.3",
    "chokidar": "^3.5.1",
    "cipher-base": "^1.0.4",
    "class-utils": "^0.3.6",
    "cliui": "^3.2.0",
    "co": "^4.6.0",
    "code-point-at": "^1.1.0",
    "collection-visit": "^1.0.0",
    "component-emitter": "^1.3.0",
    "console-browserify": "^1.2.0",
    "constants-browserify": "^1.0.0",
    "copy-descriptor": "^0.1.1",
    "core-util-is": "^1.0.2",
    "create-ecdh": "^4.0.4",
    "create-hash": "^1.2.0",
    "create-hmac": "^1.1.7",
    "cross-spawn": "^5.1.0",
    "crypto-browserify": "^3.12.0",
    "d": "^1.0.1",
    "debug": "^2.6.9",
    "decamelize": "^1.2.0",
    "decode-uri-component": "^0.2.0",
    "define-property": "^2.0.2",
    "des.js": "^1.0.1",
    "diffie-hellman": "^5.0.3",
    "domain-browser": "^1.2.0",
    "elliptic": "^6.5.4",
    "emojis-list": "^3.0.0",
    "enhanced-resolve": "^3.4.1",
    "errno": "^0.1.8",
    "error-ex": "^1.3.2",
    "es5-ext": "^0.10.53",
    "es6-iterator": "^2.0.3",
    "es6-map": "^0.1.5",
    "es6-set": "^0.1.5",
    "es6-symbol": "^3.1.3",
    "es6-weak-map": "^2.0.3",
    "escope": "^3.6.0",
    "esrecurse": "^4.3.0",
    "estraverse": "^5.2.0",
    "event-emitter": "^0.3.5",
    "events": "^3.3.0",
    "evp_bytestokey": "^1.0.3",
    "execa": "^0.7.0",
    "expand-brackets": "^2.1.4",
    "ext": "^1.4.0",
    "extend-shallow": "^3.0.2",
    "extglob": "^2.0.4",
    "fast-deep-equal": "^1.1.0",
    "fast-json-stable-stringify": "^2.1.0",
    "fill-range": "^7.0.1",
    "find-up": "^2.1.0",
    "for-in": "^1.0.2",
    "fragment-cache": "^0.2.1",
    "fsevents": "^2.3.2",
    "function-bind": "^1.1.1",
    "get-caller-file": "^1.0.3",
    "get-stream": "^3.0.0",
    "get-value": "^2.0.6",
    "glob-parent": "^5.1.2",
    "graceful-fs": "^4.2.6",
    "has": "^1.0.3",
    "has-flag": "^2.0.0",
    "has-value": "^1.0.0",
    "has-values": "^1.0.0",
    "hash-base": "^3.1.0",
    "hash.js": "^1.1.7",
    "hmac-drbg": "^1.0.1",
    "hosted-git-info": "^2.8.9",
    "https-browserify": "^1.0.0",
    "ieee754": "^1.2.1",
    "inherits": "^2.0.4",
    "interpret": "^1.4.0",
    "invert-kv": "^1.0.0",
    "is-accessor-descriptor": "^1.0.0",
    "is-arrayish": "^0.2.1",
    "is-binary-path": "^2.1.0",
    "is-buffer": "^1.1.6",
    "is-core-module": "^2.4.0",
    "is-data-descriptor": "^1.0.0",
    "is-descriptor": "^1.0.2",
    "is-extendable": "^1.0.1",
    "is-extglob": "^2.1.1",
    "is-fullwidth-code-point": "^2.0.0",
    "is-glob": "^4.0.1",
    "is-number": "^7.0.0",
    "is-plain-object": "^2.0.4",
    "is-stream": "^1.1.0",
    "is-windows": "^1.0.2",
    "isarray": "^1.0.0",
    "isexe": "^2.0.0",
    "isobject": "^3.0.1",
    "json-loader": "^0.5.7",
    "json-schema-traverse": "^0.3.1",
    "json5": "^1.0.1",
    "kind-of": "^6.0.3",
    "lazy-cache": "^1.0.4",
    "lcid": "^1.0.0",
    "load-json-file": "^2.0.0",
    "loader-runner": "^2.4.0",
    "loader-utils": "^1.4.0",
    "locate-path": "^2.0.0",
    "lodash": "^4.17.21",
    "longest": "^1.0.1",
    "lru-cache": "^4.1.5",
    "map-cache": "^0.2.2",
    "map-visit": "^1.0.0",
    "md5.js": "^1.3.5",
    "mem": "^1.1.0",
    "memory-fs": "^0.4.1",
    "micromatch": "^3.1.10",
    "miller-rabin": "^4.0.1",
    "mimic-fn": "^1.2.0",
    "minimalistic-assert": "^1.0.1",
    "minimalistic-crypto-utils": "^1.0.1",
    "minimist": "^1.2.5",
    "mixin-deep": "^1.3.2",
    "mkdirp": "^0.5.5",
    "ms": "^2.0.0",
    "nanomatch": "^1.2.13",
    "neo-async": "^2.6.2",
    "next-tick": "^1.0.0",
    "node-libs-browser": "^2.2.1",
    "normalize-package-data": "^2.5.0",
    "normalize-path": "^3.0.0",
    "npm-run-path": "^2.0.2",
    "number-is-nan": "^1.0.1",
    "object-assign": "^4.1.1",
    "object-copy": "^0.1.0",
    "object-visit": "^1.0.1",
    "object.pick": "^1.3.0",
    "os-browserify": "^0.3.0",
    "os-locale": "^2.1.0",
    "p-finally": "^1.0.0",
    "p-limit": "^1.3.0",
    "p-locate": "^2.0.0",
    "p-try": "^1.0.0",
    "pako": "^1.0.11",
    "parse-asn1": "^5.1.6",
    "parse-json": "^2.2.0",
    "pascalcase": "^0.1.1",
    "path-browserify": "^0.0.1",
    "path-dirname": "^1.0.2",
    "path-exists": "^3.0.0",
    "path-is-absolute": "^1.0.1",
    "path-key": "^2.0.1",
    "path-parse": "^1.0.7",
    "path-type": "^2.0.0",
    "pbkdf2": "^3.1.2",
    "picomatch": "^2.3.0",
    "pify": "^2.3.0",
    "posix-character-classes": "^0.1.1",
    "process": "^0.11.10",
    "process-nextick-args": "^2.0.1",
    "prr": "^1.0.1",
    "pseudomap": "^1.0.2",
    "public-encrypt": "^4.0.3",
    "punycode": "^1.4.1",
    "querystring": "^0.2.0",
    "querystring-es3": "^0.2.1",
    "randombytes": "^2.1.0",
    "randomfill": "^1.0.4",
    "read-pkg": "^2.0.0",
    "read-pkg-up": "^2.0.0",
    "readable-stream": "^3.6.0",
    "readdirp": "^3.5.0",
    "regex-not": "^1.0.2",
    "remove-trailing-separator": "^1.1.0",
    "repeat-element": "^1.1.4",
    "repeat-string": "^1.6.1",
    "require-directory": "^2.1.1",
    "require-main-filename": "^1.0.1",
    "resolve": "^1.20.0",
    "resolve-url": "^0.2.1",
    "ret": "^0.1.15",
    "right-align": "^0.1.3",
    "ripemd160": "^2.0.2",
    "safe-buffer": "^5.2.1",
    "safe-regex": "^1.1.0",
    "safer-buffer": "^2.1.2",
    "semver": "^5.7.1",
    "set-blocking": "^2.0.0",
    "set-value": "^2.0.1",
    "setimmediate": "^1.0.5",
    "sha.js": "^2.4.11",
    "shebang-command": "^1.2.0",
    "shebang-regex": "^1.0.0",
    "signal-exit": "^3.0.3",
    "snapdragon": "^0.8.2",
    "snapdragon-node": "^2.1.1",
    "snapdragon-util": "^3.0.1",
    "source-list-map": "^2.0.1",
    "source-map": "^0.6.1",
    "source-map-resolve": "^0.5.3",
    "source-map-url": "^0.4.1",
    "spdx-correct": "^3.1.1",
    "spdx-exceptions": "^2.3.0",
    "spdx-expression-parse": "^3.0.1",
    "spdx-license-ids": "^3.0.9",
    "split-string": "^3.1.0",
    "static-extend": "^0.1.2",
    "stream-browserify": "^2.0.2",
    "stream-http": "^2.8.3",
    "string-width": "^2.1.1",
    "string_decoder": "^1.3.0",
    "strip-ansi": "^4.0.0",
    "strip-bom": "^3.0.0",
    "strip-eof": "^1.0.0",
    "supports-color": "^4.5.0",
    "tapable": "^0.2.9",
    "timers-browserify": "^2.0.12",
    "to-arraybuffer": "^1.0.1",
    "to-object-path": "^0.3.0",
    "to-regex": "^3.0.2",
    "to-regex-range": "^5.0.1",
    "tty-browserify": "^0.0.0",
    "type": "^2.5.0",
    "uglify-js": "^2.8.29",
    "uglify-to-browserify": "^1.0.2",
    "uglifyjs-webpack-plugin": "^0.4.6",
    "union-value": "^1.0.1",
    "unset-value": "^1.0.0",
    "upath": "^1.2.0",
    "urix": "^0.1.0",
    "url": "^0.11.0",
    "use": "^3.1.1",
    "util": "^0.11.1",
    "util-deprecate": "^1.0.2",
    "validate-npm-package-license": "^3.0.4",
    "vm-browserify": "^1.1.2",
    "vue": "^2.6.14",
    "watchpack": "^1.7.5",
    "watchpack-chokidar2": "^2.0.1",
    "webpack-sources": "^1.4.3",
    "which": "^1.3.1",
    "which-module": "^2.0.0",
    "window-size": "^0.1.0",
    "wordwrap": "^0.0.2",
    "wrap-ansi": "^2.1.0",
    "xtend": "^4.0.2",
    "y18n": "^3.2.2",
    "yallist": "^2.1.2",
    "yargs": "^8.0.2",
    "yargs-parser": "^7.0.0"
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },
  "author": "",
  "license": "ISC"
}

package.json

四、展示

生产环境 npm run build

开发环境 npm run dev

下一篇：饮冰三年-人工智能-Vue-68 CLI相关

相关阅读:
微信公众号开发问题总结（坑）
map 取值报空指针，明明值存在
 关于客户端Socket连接服务端，客户端只有在服务端关闭后才收到数据的问题
 关于Spine动画，关于cocosCreator
cocsoCreator实现镜头跟随节点移动
 cocos节点添加Touch监听代码
 使用git管理你的代码，使用git托管代码至gitee
关于ccoosCreator里的物理系统
 Python Scrapy 爬虫简单教程
 quasar 参考文档
原文地址：https://www.cnblogs.com/YK2012/p/14882442.html

饮冰三年-人工智能-Vue-67 Webpack

三、Webpack

1、认识webpack

2、webpack的安装

3、webpack的起步

3.1 首先在mathUtils.js 中写方法，在main.js中使用

3.2 webpack基本搭建

3.2.1 安装cnpm

3.2.2 安装局部dev环境的webpack

3.2.3 运行webpack，将.srcmain.js 打包到 .distundle.js

3.2.3 设置index.html页面

4、webpack的配置

4.1 初始化npm包管理的文件

4.2 创建一个webpack.config.js

4.3 创建package.json中定义启动

5、loader的使用

5.1 css文件处理

5.2 less文件处理

5.3 图片文件处理

5.4 ES6语法处理

6、webpack中配置Vue

6.1 webpack + vue 初体验

6.2 template属性

6.2 Vue组件化开发引入

7、plugin的使用

7.1 初识plugin

7.2 添加版权的Plugin

7.3 打包html的Plugin

7.3 js压缩的Plugin

8、搭建本地服务器

9、webpack配置分离（三家分晋）

3.2.3 运行webpack，将.srcmain.js 打包到 .distundle.js