使人困惑的webpack之entry

时间 2019-11-05

原文原文链接

使用webpack快一年了，如今1.X版本都过气了，可是感受本身对它那复杂的配置仍是很不熟悉，各类路径，各类loader，各类plugin，又是单页面又是多页面... 在vue-cli出来的时候，都不敢用他的webpack模板，主要就是由于webpack的配置文件看不懂，不敢本身根据须要作修改。如今沉下心来，一点一点的玩弄经常使用属性和插件，尽力能自如的进行配置。先拿配置中的entry开始。html

从最简单开始

最简单的webpack.config.js文件：vue

module.exports = {
    entry: './app.js',
    output: {
        path: './output',
        filename: 'output-file.js'
    }
}

这个足够简单，进行webpack以后，会在命令的执行目录下新建output目录（若是须要的话），并将打包app.js和它的依赖，生成output-file.js放在output目录中：node

若是不但愿这里涉及到的路径和执行webpack命令时的具体路径相关，而是但愿相对于配置文件的路径的话，就须要使用path模块：jquery

var path = require('path')

module.exports = {
    entry: path.resolve(__dirname, './app.js'),
    output: {
        path: path.resolve(__dirname, './output'),
        filename: 'output-file.js'
    }
}

entry的三种形式

配置文件中entry接受三种形式的值：字符串，数组和对象webpack

对象entry

对象形式以下：web

entry: {
    <key>: <value>
    ...
}

最早介绍对象形式，是由于这个是最完整的entry配置，其余形式只是它的简化形式而已。对象中的每一对属性对，都表明着一个入口文件，所以多页面配置时，确定是要用这种形式的entry配置。vue-cli

keynpm

key能够是简单的字符串，好比：'app', 'main', 'entry-1'等。而且对应着output.filename配置中的[name]变量数组

entry: {
    'app-entry': './app.js'
},
output: {
    path: './output',
    filename: '[name].js'
}

上面的配置打包后生成：app

key还能够是路径字符串。此时webpack会自动生成路径目录，并将路径的最后做为[name]。这个特性在多页面配置下也是颇有用的

entry: {
    'path/of/entry': './deep-app.js',
    'app': './app.js'
},
output: {
    path: './output',
    filename: '[name].js'
}

上面的配置打包后生成：

value

value若是是字符串，并且必须是合理的noderequire函数参数字符串。好比文件路径：'./app.js'(require('./app.js'))；好比安装的npm模块：'lodash'(require('lodash'))

entry: {
    'my-lodash': 'lodash'
},
output: {
    path: './output',
    filename: '[name].js'
}

上面的配置打包后生成：

value若是是数组，则数组中元素须要是上面描述的合理字符串值。数组中的文件通常是没有相互依赖关系的，可是又处于某些缘由须要将它们打包在一块儿。好比：

entry: {
    vendor: ['jquery', 'lodash']
}

字符串entry

entry: './app.js'

等价于下面的对象形式：

entry: {
    main: './app.js'
}

数组entry

entry: ['./app.js', 'lodash']

等价于下面的对象形式：

entry: {
    main: ['./app.js', 'lodash']
}

应用

具有了上面的能力，就能够开始配置一个简单的多页面webpack开发环境了。

开始前，要考虑清楚项目目录结构，使用wepback时，通常要有个src源代码目录和一个build的打包目录。

|-build
|-src
webpack.config.js

src目录结构

假设咱们有两个页面home和about，两个main.js分别是两个页面的入口文件：

|-src
    |-pages
          |-about
                about.html
                main.js
          |-home
                home.html
                main.js

build目录结构

对于复杂点的webpack项目，先决定打包后的目录结构很重要。webpack就像画笔，打包后的目录就像你打算画的画，要朝着目标去画。

假如我但愿“画”是这样的：

|-build
      |-assets
             |-js
                 home.bundle.js
                 about.bundle.js
      home.html
      about.html

有了这个结构，html中如何引入js文件就清楚了，例如在src/pages/home/home.html中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Home</title>
  </head>
  <body>
    Home Page
  </body>
  <script src="assets/js/home.bundle.js"></script>
</html>

webpack配置文件

接下来，朝着build的结构，写配置文件webpack.config.js：

var path = require('path')

module.exports = {
  entry: {
    'assets/js/home': path.resolve(__dirname, './src/pages/home/main.js'),
    'assets/js/about': path.resolve(__dirname, './src/pages/about/main.js')
  },
  output: {
    path: path.resolve(__dirname, './build'),
    filename: '[name].bundle.js'
  }
}

打包

在webpack.config.js目录下执行webpack命令，而后手动将两个html文件从src/pages下拷贝到build目录下，这样在build目录下就是一个打包好的多页面结构了。

后面将用各类插件，让webpack打包全自动化，这里只是一个简单的应用例子来了解entry的用法。

结语

entry一我的能玩的基本就这么多，一些复杂的配置无非是经过变量的形式给其赋值，完成更灵活的配置。entry是webpack的起点，后面全部的文件生成，提取CSS，生成HTML或者是CommonChunk都是在其基础上进行的加工处理。