webpack适用场景及构建项目

webpack引出的背景

在简单的demo中使用npm的依赖包文件，通过ES6中的import是无法直接引入对应的npm中的依赖（目前是不支持的，后续有可能更新后，支持）。
我们知道在node模块中，采用的是CommonJS规范，使用require来引入文件。这里可能有人会问为什么还要使用import来引入对应的npm中的依赖呢？
为了明白这里为何非要使用import，首先需要明白import和require的区别。

ES6 import和CommonJS require的区别

1. 在ES6中模块间的联系并没有使用node中的CommonJS，就连require都没有使用，所以说require在ES6中并不能直接使用，其依旧是node中的一个私有方法。
2. 在使用import的时候，需要将import放在文件的最开始，而且是必须的。而require则不是非要放在文件最开始，相对来说比较灵活。
3. import引入的模块，只有在编译的时候才会使用，而require是在运行时使用，因此import在性能上要好很多。
4. 目前所有的引擎还没有完全实现import的支持，所以在node中必须使用babel支持ES6，将ES6转成ES5，将import转为require。
   长远来看，require是有局限的，因为引擎支持ES6，支持import是迟早的事，所以在代码部署import上是一种趋势。

---

因此使用babel构建项目，将ES6、import转为可以识别的代码，实现babel的编译，引入webpack。

webpack 构建项目

官网下载安装最新版的node环境

搭建项目目录

1. 在项目根目录下执行npm init 生成package.json配置文件
2. 通过npm安装webpack，npm i webpack@3 -D

配置webpack.config.js文件

项目根目录下新建webpack.config.js文件，在webpack.config.js中配置入口文件和输出文件

module.exports = {
  /* webpack 入口文件 */
  entry: './js/scroll.js',

  /* webpack 输出文件 */
  output: {
    filename: './js/output/scroll.js'
  }
};

这里入口文件可以写通过import引入npm依赖包中的js文件。

在项目根目录下执行webpack命令，会将文件打包出一个自执行函数。
类似这种：

Babel编译ES6语法

1. 安装babel-loader（npm i babel-loader -D）
2. 还需要安装babel-core（babel-loader@8—>@babel/core，babel-loader@7—>[email protected]）
3. 在webpack.config.js下配置loader

module.exports = {
  /* webpack 入口文件 */
  entry: './js/scroll.js',

  /* webpack 输出文件 */
  output: {
    filename: './js/output/scroll.js'
  },
  /* webpack loader 规则配置 */
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader"
      }
    ]
  }
};

4. 执行webpack可以编译出转化后的代码
5. 执行webpack --watch，可以监听服务
   当修改入口文件，webpack会自动编译，并打包
6. webpack --watch --progress --colors

webpack搭建本地服务器

由于每次更新完编译完的代码后，还需要手动刷新浏览器，才能看到最新的效果，所以我们可以使用webpack-dev-server解决这个问题

1. 安装webpack-dev-server，npm i webpack-dev-server@2(webpack-dev-server@3只支持webpack v4)
2. 修改webpack.config.js文件，增加配置devServer启动环境。

/* 配置webpack-dev-server */
  devServer: {
    contentBase: './'
  }

---

根目录下生成index.html文件

3. 安装HtmlWebpackPlugin：npm i html-webpack-plugin -D
4. webpack.config.js启用HtmlWebpackPlugin

 /* 引入 HtmlWebpackPlugin */
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  /* webpack 入口文件 */
  entry: './js/scroll.js',

  /* webpack 输出文件 */
  output: {
    filename: './js/output/scroll.js'
  },
  /* webpack loader 规则配置 */
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader"
      }
    ]
  },

  /* 配置webpack-dev-server */
  devServer: {
    contentBase: './'
  },
  /* 配置插件 */
  plugins: [
    new HtmlWebpackPlugin()
  ]
};

5. 自动打开浏览器：webpack-dev-server --open

---

参见 项目示例
webpack中文文档