webpack2配置

作者: 一蓑烟雨任平生_cui | 来源:发表于2017-06-17 18:04 被阅读0次

使用vue做一个简单的SPA应用，配置webpack

安装Node.js

webpack是基于Node.js的打包工具，自然是先安装Node。Node官网

在开始之前，首先全局安装webpack，以免后面忘记安装而出错。命令如下：

npm install webpack -g

初始化项目

新建一个文件夹，比如叫vueManager。

打开命令行，cd 到vueManager目录下，执行下面命令初始化项目。

npm init

在这里一路回车即可；如果回车提示"Sorry, name can no longer contain capital letters"。那就是让你起一个名字。然后一路回车，忽略配置信息，最后生成package.json配置文件。

或者直接通过下面命令可以跳过以上步骤

npm init -y/-f

给项目加上语法报错和代码规范检查

安装eslint, 用来检查语法报错, 当我们书写js时, 有错误的地方会出现提示。

npm install eslint eslint-config-enough eslint-loader --save-dev

npm install（简写npm i）可以同时安装多个包, 包名之间用空格分隔。包会被安装进node_modules目录。

--save-dev会把安装的包和版本号记录到package.json中的devDependencies对象中， --save, 会记录到dependencies对象中。--save-dev是开发环境用到的，--save是生产环境用到的。

有些npm包安装是需要编译的，不同的环境可能无法通用，这样我们在git提交的时候忽略node_modules，还有些IDE的默认的配置文件，比如webstorm中的.idea文件，也不需要提交，我们可以将这些不需要提交的文件名写入.gitignore文件中。
这样其他人拉取下来代码后是没有node_modules文件，那么通过下面命令：

npm install

就会将package.json中的devDependencies和dependencies中的相应的包全部下载下来。

eslint-config-enough是配置文件, 规定了代码规范, 要使它生效, 我们需要在package.json中配置。

"eslintConfig": {
    "extends": "enough",
    "env": {
      "browser": true,
      "node": true
    }
  }

eslint-loader用于在webpack编译的时候检查代码, 如果有错误, webpack会报错。

项目里安装了eslint还没用, 我们的IDE和编辑器也得装eslint插件支持它。

比如我用的 Visual Studio Code 需要安装ESLint扩展。

atom需要安装linter和linter-eslint这两个插件, 装好后重启生效。

WebStorm需要在设置中打开eslint开关。

写页面

建立src/index.html文件。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

这是一个空页面。注意：我们不需要自己写<script src="index.js"></script>来引入，包括样式文件都不需要，我们只需要把所有依赖的文件导入到入口文件中，webpack都会帮我们打包好，还有一个原因是打包后的文件名和路径可能会变，所以我们用webpack插件帮我们自动加上。

安装webpack和Babel

首先，执行下面命令。

npm install webpack webpack-dev-server html-webpack-plugin html-loader css-loader style-loader file-loader url-loader --save-dev

webpack-dev-server是webpack提供的用来开发调试的服务器, 让你可以用http://127.0.0.1:8080/ 这样的url打开页面来调试, 可能端口号不同，可以自己设置，有了它就不用配置nginx了, 方便很多。

html-webpack-plugin, html-loader, css-loader, style-loader等这些都是打包html、css文件的插件。

html-webpack-plugin和html-loader的区别, css-loader和style-loader的区别, 看下面的配置文件便可一目了然。

file-loader和url-loader是打包二进制文件的插件。

然后, 为了让不支持ES6的浏览器也能正常运行，我们还需要安装babel，它会把我们写的ES6代码转化成ES5，这样我们源代码写ES6，打包时就会生成ES5。

npm install babel-core babel-preset-env babel-loader --save-dev

babel-core是babel的核心编译器。
babel-preset-env是一个配置文件，可以将es6/es7转换成es5，对对滴，你木有看错，它并不是只能转es6。
babel还有其他的配置文件，如果你项目中只使用了es6，只需转es6，那就安装babel-preset-es2015插件即可。命令如下：

npm install babel-preset-es2015 --save-dev

只安装babel-preset-env是不够的，还需要在package.json中配置。

"babel": {
    "presets": [
      "env"
    ]
  }

在打包时babel会读取package.json中babel字段的内容，然后执行相应的转换。

如果你是用的是es2015，那么配置也要相应的修改为：

"babel": {
    "presets": [
      "es2015"
    ]
  }

babel-loader是webpack的插件。

安装vue-loader 和 vue-template-compiler

npm install vue-loader vue-template-compiler --save-dev

配置webpack

基本上目前用到的以及想到的包都装好了，下面我们就来创建webpack配置文件webpack.config.js。
注意：这个文件是在node.js中运行的, 所以不支持ES6的import语法。看内容吧:


//整个配置中我们使用 Node 内置的 path 模块，并在它前面加上 __dirname这个全局变量。可以防止不同操作系统之间的文件路径问题，并且可以使相对路径按照预期工作。
const path = require('path');

var webpack = require('webpack');

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    //打包的总入口文件
    entry: './src/index.js', 

    //配置打包输出相关的
    output: {
        //打包输出目录(必须是绝对路径，使用 Node.js 的 path 模块)
        path: path.join(__dirname,'dist'),//打包到dist文件夹
        filename: 'bundle.js'//最终打包成的文件名bundle.js
    },
    module: {
      //关于模块配置

      //当webpack当遇到import ... 时, 会调用这里配置的loader对引用的文件进行编译
      //配置各种类型文件的加载器, 称为loader

      rules: [
         // 模块规则（配置 loader、解析器等选项）

        {  
          // 使用babel编译ES6/ES7/ES8为ES5代码
          // 使用正则表达式匹配后缀名为.js的文件
        
          test: /\.js$/,

            // 排除node_modules目录下的文件, npm安装的包不需要编译
          exclude: /node_modules/,

          /*
            use指定该文件的loader, 值可以是字符串或者数组.
            这里先使用eslint-loader处理, 返回的结果交给babel-loader处理. loader的处理顺序是从最后一个到第一个.
            eslint-loader用来检查代码, 如果有错误, 编译的时候会报错.
            babel-loader用来编译js文件.
          */

          use: ['babel-loader', 'eslint-loader']

        },
        {
          // 匹配.html文件
          test: /\.html$/,
          /*
          使用html-loader, 将html内容存为js字符串, 比如当遇到
          import htmlString from './template.html'
          template.html的文件内容会被转成一个js字符串, 合并到js文件里.
          */
          use: 'html-loader'
        },
        {
          //使用vue-loader，编译写入.vue文件
          test:/\.vue$/,
          use:'vue-loader'
        },
        {
          // 匹配.css文件
          test: /\.css$/,

          /*
          先使用css-loader处理, 返回的结果交给style-loader处理.
          css-loader将css内容存为js字符串, 并且会把background, @font-face等引用的图片,
          字体文件交给指定的loader打包, 类似上面的html-loader, 用什么loader同样在loaders对象中定义, 等会下面就会看到.
          */

          use: ['style-loader', 'css-loader']
        },
        {
          /*
          匹配各种格式的图片和字体文件
          上面html-loader会把html中<img>标签的图片解析出来, 文件名匹配到这里的test的正则表达式,
          css-loader引用的图片和字体同样会匹配到这里的test条件
          */
          test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,

          /*
          使用url-loader, 它接受一个limit参数, 单位为字节(byte)

          当文件体积小于limit时, url-loader把文件转为Data URI的格式内联到引用的地方
          当文件大于limit时, url-loader会调用file-loader, 把文件储存到输出目录, 并把引用的文件路径改写成输出后的路径

          比如 ![](smallpicture.png)
          会被编译成，也就是base64表示
          [站外图片上传中……(3)]

          而[站外图片上传中……(4)]
          会被编译成
          [站外图片上传中……(5)]
          */
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 5000
              }
            }
          ]
        }
      ]
    },
      /*
      配置webpack插件
      plugin和loader的区别是, loader是在import时根据不同的文件名, 匹配不同的loader对这个文件做处理,
      而plugin, 关注的不是文件的格式, 而是在编译的各个阶段, 会触发不同的事件, 让你可以干预每个编译阶段.
      */

    plugins: [

        /*
        html-webpack-plugin用来打包入口html文件
        entry配置的入口是js文件, webpack以js文件为入口, 遇到import, 用配置的loader加载引入文件
        但作为浏览器打开的入口html, 是引用入口js的文件, 它在整个编译过程的外面,
        所以, 我们需要html-webpack-plugin来打包作为入口的html文件
        */

      new HtmlWebpackPlugin({
        /*
        template参数指定入口html文件路径, 插件会把这个文件交给webpack去编译,
        webpack按照正常流程, 找到loaders中test条件匹配的loader来编译, 那么这里html-loader就是匹配的loader
        html-loader编译后产生的字符串, 会由html-webpack-plugin储存为html文件到输出目录, 默认文件名为index.html
        可以通过filename参数指定输出的文件名
        html-webpack-plugin也可以不指定template参数, 它会使用默认的html模板.
        */

        filename:'index.html',  //在内存中生成的网页名
        template: './src/index.html'  //生成网页名的依据
      })
    ]
}

基础回顾

通过下面命令可以查看webpack的所有帮助指令。

webpack -h

比如：查看打包的进度和颜色。

webpack --progress --colors

打包并压缩

webpack -p

关于代码压缩

webpack -p 是 webpack内置的压缩文件的命令，但是项目最好使用插件配置。

webpack 自带了一个压缩插件 UglifyJsPlugin，只需要在配置文件中引入即可。


  // 压缩js
  new webpack.optimize.UglifyJsPlugin({
      compress: {
          warnings: false
      },
      comments: false //去掉版权信息等注释
  }),
  // 代码顺序优化
  new webpack.optimize.OccurrenceOrderPlugin()*/

加入了这个插件之后，编译的速度会明显变慢，所以一般只在生产环境启用。

不足之处

通过 webpack 命令可以将文件打包在dist目录下，但这样每修改一次代码都得重新执行命令，然后刷新页面。

webpack --watch 虽然可以将没有修改的文件缓存在内存中，只打包修改过的，但还是需要手动刷新浏览器。

使用 webpack-dev-server包 + html-webpack-plugin 插件，文件更新后可以自动打包并且刷新页面。

在package.json的scripts字段中配置：

 "dev": "webpack-dev-server --inline --hot --open --port 8023"

我们知道本地默认端口是8080，为了避免不必要的冲突，我们自己定义一个端口号，比如：8023。LOVE，懂得人自然懂。（鬼脸）

跑起来

下面我们在终端执行� npm run dev 启动项目。

npm run dev

你会发现浏览器自动打开页面，并且每次修改代码保存后，页面会自动刷新。

这些都得益于配置的�几个参数，一一讲解。

--inline 自动刷新。
--hot 热加载。
--open 自动打开页面。
--port 当然是端口了。
--host 可以指定服务器的ip，不指定默认为127.0.0.1（localhost）

这个时候你肯定会好奇为什么dist目录还是空的。那当然了，因为你没有执行webpack去打包嘛。

我们只是在内存中生成了文件，并没有生成物理文件，这样极大的提高了速度和效率。凡是对可以编译的文件修改后都会自动打包并且刷新浏览器。

等到最终项目完成的时候再执行 webpack 命令打包。

参考：

webpack中文官网华尔街见闻技术团队--webpack2 打包实战

demo后续的整个过程和踩的坑都会整理出来。权当是自己的在线笔记罢了。若有不对或不合理的地方还望指正，共同进步。

webpack2配置

使用vue做一个简单的SPA应用，配置webpack

安装Node.js

初始化项目

给项目加上语法报错和代码规范检查

写页面

安装webpack和Babel

配置webpack

基础回顾

关于代码压缩

不足之处

使用 webpack-dev-server包 + html-webpack-plugin 插件，文件更新后可以自动打包并且刷新页面。

跑起来

参考：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读