webpack(2.0)入门详解 | 掘金技术征文

时间 2019-11-06

标签 webpack 2.0 入门详解技术征文繁體版

原文原文链接

声明：以此文写给摸索和学习使用webpack的初级使用者，由于官方文档只给出了关键点的解读，对于入门的初学者看的可谓是一头雾水，如今好多的文章也是只是介绍了本身的想法和案例，没有讲明白基础点

我所接触的前端模块化变动

两年前实习所在的一家创业公司在前端工程化方面还很传统，几乎称不上是前端工程化，由于咱们经过使用Ant这个构建工具，在一个build.xml中配置将全部的js都打包成一个js文件，css也是，可想而知项目小的时候，前期很顺利，后来项目愈来愈大，新需求新逻辑愈来愈多，这种方法即将被淘汰掉。javascript

后半年咱们开始接触grunt+sea.js，将之前的项目所有重构，性能上有了很大的改善，可是慢慢地就会发现须要配置的task愈来愈多等问题，那时候jquery+bootstrap仍是咱们的主要开发框架。css

一年后我毕业了离开创业公司，来到了如今的公司，见识到了真正的前端工程化项目，目前咱们还处在使用webpack+gulp的阶段，今年即将全面使用webpack 去掉gulphtml

来一段废话

现在的Webpack已是一个出色的前端自动化构建工具、模块化工具、资源管理工具。至于Webpack是什么？为何使用Webpack？gulp,grant,webpack 什么关系和区别这些在此不作赘述，太多的文档和文章了你们去了解一下前端

走进webpack 基本实例(翻译2.0官方例子)

先不要考虑把每个点和知识都了解和懂了再动手，我通常都是直接看官方的英文文档的Getting Started,相信我这绝对是最快最正确的学习方式java

一步步开始吧node

基础需求：先装好node，由于webpack是一个基于node的项目
初始化一个webpack项目根据如下命令

//cd 到你的一个目录下能够是documents or desktop一步步输入命令
mkdir webpack-demo && cd webpack-demo 
npm init -y
npm install --save-dev webpack复制代码

这时候打开你的项目文件你会发现webpack-demo文件夹下多了两个文件jquery

package.json
node_modules

而后咱们在编辑器中打开webpack-demo文件夹，手动建立下列目录文件webpack

app文件夹/index.js(用来写js逻辑)
index.html(实例的入口页面)
webpack.config.js(webpack的配置文件)

上代码示例(粘贴到你的文件中用吧)app/index.js程序员

function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());复制代码

因为在这个js中依赖lodash(这是一个具备一致接口、模块化、高性能等特性的 JavaScript 工具库),因此在咱们的项目中须要加入这个依赖到咱们的node_modules中，执行如下命令便可web

npm install --save lodash复制代码

以上命令只是将lodash这个依赖库添加进去，然而咱们要使用还得经过import 将它引入到具体的js文件中，因此修改咱们的app/index.js，添加一行,而后将它以 _ 的别名绑定（不会形成全局范围变量名污染）

import _ from 'lodash';
function component () {
  var element = document.createElement('div');
  element.innerHTML = _.join(['Hello','webpack'], ' ');
  return element;
}
document.body.appendChild(component());复制代码

下面来写index.html

<html>
  <head>
    <title>webpack 2 demo</title>
  </head>
  <body>
   <script src="dist/bundle.js"></script>
  </body>
</html>复制代码

你确定会问？dist目录没有啊？更别说bundle.js了，别着急继续往下看webpack.config.js

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};复制代码

而后在运行webpack 命令（若是存在 webpack.config.js，webpack 命令将默认选择使用它）

webpack --config webpack.config.js复制代码

命令行的结果

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./app/index.js 278 bytes {0} [built]复制代码

此时咱们的项目目录中已经成功建立 dist/bundle.js 文件，打开浏览器运行你的index.html页面会显示'Hello webpack'

让我门带着疑问咱们开始讲下面的内容

webpack配置文件详解

webpack的配置文件是一个node.js的module,它没有固定的命名，咱们看到的例子都是webpack.config.js，一开始我觉得这是约定成俗的固定名字，就例如gulpfile.js,它也没有固定的路径要求，若是你直接用webpack来执行编译，那么webpack默认读取的将是当前目录下的webpack.config.js

webpack.config.js用CommonJS风格来书写，形如：

module.exports = {
    entry: "./entry",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    }
}复制代码

若是你有其它命名的须要或是你有多份配置文件，可使用--config参数传入路径来执行：

$ webpack --config ./webpackConfig/dev.config.js复制代码

一些经常使用基本概念

入口文件配置：entry参数

entry能够是字符串形式的单个文件入口，也能够是对象形式的多入口，若是是多个单页应用程序，那么则使用多入口的方式来独立每一个应用

entry: './app/index.js',复制代码

单入口

entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
}复制代码

多入口

输出文件：output参数

output参数告诉webpack以什么方式来生成/输出文件，值得注意的是，与entry不一样，output至关于一套规则，全部的入口都必须使用这一套规则，不能针对某一个特定的入口来制定output规则，于此同时output有不少options,这里介绍比较经常使用的：

path、publicPath、filename、chunkFilename

全部的opitons

webpack中output配置项必需要包含的两个参数是path和filename

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;复制代码

path

path参数表示生成文件的根目录，须要传入一个绝对路径。path参数和后面的filename参数共同组成入口文件的完整路径

filename

filename指定每一个输出文件在最终生成目录上的名称。

1.单个入口文件的output配置

{
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/build'
  }
}

// writes to disk: ./build/bundle.js复制代码

2.多入口文件的output配置，有如下三种规则

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/build'
  }
}

// writes to disk: ./build/app.js, ./build/search.js复制代码

[name]，指代入口文件的name，也就是上面提到的entry参数的key，所以，咱们能够在name里利用/，便可达到控制文件目录结构的效果。
[hash]，指代本次编译的一个hash版本，值得注意的是，只要是在同一次编译过程当中生成的文件，这个[hash]的值就是同样的；在缓存的层面来讲，至关于一次全量的替换。
[chunkhash]，指代的是当前chunk的一个hash版本，也就是说，在同一次编译中，每个chunk的hash都是不同的；而在两次编译中，若是某个chunk根本没有发生变化，那么该chunk的hash也就不会发生变化。这在缓存的层面上来讲，就是把缓存的粒度精细到具体某个chunk，只要chunk不变，该chunk的浏览器缓存就能够继续使用。

publicPath

publicPath参数表示的是一个URL路径（指向生成文件的根目录），用于生成css/js/图片/字体文件等资源的路径，以确保网页能正确地加载到这些资源。 publicPath参数跟path参数的区别是：path参数实际上是针对本地文件系统的，而publicPath则针对的是浏览器；所以，publicPath既能够是一个相对路径，如示例中的'../../../../build/'，也能够是一个绝对路径如http形式的网页连接。

chunkFilename

chunkFilename参数与filename参数相似，都是用来定义生成文件的命名方式的，只不过，chunkFilename参数指定的是除入口文件外的chunk

如今来讲说咱们最开始的案例中用到的path变量是什么，在最开始讲到webpack的配置文件是一个node.js的module，因此这里的path其实也是node.js的一个模块，使用来处理路径的模块，它提供了不少方法好比获取绝对路径的path.resolve()等，能够去搜索资料学习

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};复制代码

各类Loader配置：module参数
webpack一直号称可以打包任何资源，采用的就是Loader，loader是对应用程序中资源文件进行转换。它们是（运行在Node.js中的）函数，能够将资源文件做为参数的来源，而后返回新的资源文件

这里距举一个打包css的例子，要经过webpack打包CSS，像任何其余模块同样将CSS导入JavaScript代码，并使用css-loader（它输出CSS做为JS模块）

首先，安装相对应的 loader
像JavaScript模块同样导入CSS文件，例如在index.js中
其次，配置 webpack.config.js，对每一个 .css 文件使用 css-loader

$ npm install --save-dev css-loader

建立一个index.css在index.js中

import './index.css';

配置CSS和JavaScript打包在一块儿

module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            use: 'css-loader'
        }]
    }
}复制代码

更多的内容例如插件模块热替换等内容请自行学习

写在最后的总结

看完这篇文章，若是按照个人步骤一步步实现，确定对webpack(2.0)已经入门了，下面须要的就是你花费时间学习官方文档而且结合本身的项目来实际操做了，附上官网的文档，2.0的文档写的很清楚和详细webpack2.0

Cayley 一个不断努力学习的女程序员