取消 Vue 的 Webpack 配置

無論喜歡還是不喜歡, webpack是現代前端JavaScript工具集的一個基本組件,將無數小檔案轉化為一個(或更多)凝聚性的組合,但對於許多人來說,它的運作是一個謎團。 rise of CLI tools)產生複雜的準備設定有助於緩和和加重這個問題。但是,當一切都說完,你真的明白無數的配置檔案正在做什麼?你是否能夠手工建立自己的配置?希望,在這篇文章之後,你會是。

出发

让我们用 vue-cli webpack-simple template创建一个快速的项目。

该webpack-simple模板是关于一个webpack设置的基本,你可以离开Vue. 它是,如其名称所暗示,相当简单,但它得到的工作做得非常好。

1# Install vue-cli globally if you haven't already.
2$ npm install -g vue-cli
3
4# Create a new project called "demistify-project" with the "webpack-simple" template.
5$ vue init webpack-simple demistify-project
6
7# Install the dependencies for the project
8$ cd demistify-project
9$ npm install

好吧,现在,如果你愿意的话,用npm run dev开启开发构建,然后用代码,热重加载和其他东西玩耍。

神秘的秘密

你做到了吗?好吧,让我们继续前进,看看webpack.config.js,这是最重大的文件,我会粘贴我在这里的文件,以适当的尺寸(由Webpack-Simple模板的版本1.0.0生成)。

 1[label webpack.config.js]
 2var path = require('path')
 3var webpack = require('webpack')
 4
 5module.exports = {
 6  entry: './src/main.js',
 7  output: {
 8    path: path.resolve(__dirname, './dist'),
 9    publicPath: '/dist/',
10    filename: 'build.js'
11  },
12  module: {
13    rules: [
14      {
15        test: /\.vue$/,
16        loader: 'vue-loader',
17        options: {
18          loaders: {
19          }
20          // other vue-loader options go here
21        }
22      },
23      {
24        test: /\.js$/,
25        loader: 'babel-loader',
26        exclude: /node_modules/
27      },
28      {
29        test: /\.(png|jpg|gif|svg)$/,
30        loader: 'file-loader',
31        options: {
32          name: '[name].[ext]?[hash]'
33        }
34      }
35    ]
36  },
37  resolve: {
38    alias: {
39      'vue$': 'vue/dist/vue.esm.js'
40    }
41  },
42  devServer: {
43    historyApiFallback: true,
44    noInfo: true
45  },
46  performance: {
47    hints: false
48  },
49  devtool: '#eval-source-map'
50}
51
52if (process.env.NODE_ENV === 'production') {
53  module.exports.devtool = '#source-map'
54  // http://vue-loader.vuejs.org/en/workflow/production.html
55  module.exports.plugins = (module.exports.plugins || []).concat([
56    new webpack.DefinePlugin({
57      'process.env': {
58        NODE_ENV: '"production"'
59      }
60    }),
61    new webpack.optimize.UglifyJsPlugin({
62      sourceMap: true,
63      compress: {
64        warnings: false
65      }
66    }),
67    new webpack.LoaderOptionsPlugin({
68      minimize: true
69    })
70  ])
71}

好吧,所以有足够多的东西可以带进去,坦率地说,你会很好地把大部分东西留在一边,我会尽我所能地解释,所以如果你真的想和某件事混乱,至少你会对你在混乱什么有模糊的想法。

无论如何,webpack.config.js只是一个导出由webpack来构建项目的对象的文件,这意味着你可以使用其中的任何节点模块,并从你想要的许多文件和位置组成它。

入口

(一)(一)(一)(一)

通过该对象,我们击中的第一个属性是输入。这告诉Webpack从哪个文件开始组合过程。

1entry: './src/main.js',
2
3// Different chunks:
4entry: {
5  main: './src/main.js',
6  vendor: './vendor/index.js'
7}

出口

(一)(一)(一)(一)

下一个部分有点复杂和令人困惑. 输出属性是我们指定生成的包(s)在哪里(以及如何)结束的地方。

1output: {
2  path: path.resolve(__dirname, './dist'),
3  publicPath: '/dist/',
4  filename: 'build.js'
5},

path - 所有生成的资产的根目录. 我们在这里使用 __dirname 和 path 来确保一切都结束在正确的地方,无论当前的工作目录
publicPath - 这是开发 HTTP 服务器将服务 output.path 的内容的路径. 您可能需要为您的特定设置稍微改变这个路径。基本上: ./dist/build.js 在文件系统中变成 /dist/build.js`.
filename - 文件的名称将把一切包装到一起。这可以自定义为包含一个哈希(build-[hashjs)或使用分类名称(build-namejs)以及其他东西([LINK])([0

我发现我的大多数问题都源于错误配置的输入和输出部分,所以最好真正熟悉这些部分,并先看看如果有什么不对劲。

模块,规则和装载器!哦,我的!

此点在本质上是 webpack 构建的核心. 文件加载器. 加载器本质上是将通过它们路由的任何文件转换成另一种形式的包裹。

这个部分看起来很复杂,但坦率地说,它是非常可预测和容易理解的。

让我们继续前进并通过每一个规则:

1{
2  test: /\.vue$/,
3  loader: 'vue-loader',
4  options: {
5    loaders: {
6    }
7    // other vue-loader options go here
8  }
9},

是的,好`ol vue-loader是Vue.js的秘密酱油,它将单一文件组件转化为JS并渲染函数。

这里是每一个财产做什么:

test - 一个常规的表达式,检查一个文件名是否以.vue扩展结束。这确保vue-loader只对.vue文件运行
loader - 使用的加载器的名称. 这里没有惊喜。

由于vue-loader允许您将其他加载器添加到模板部分的预处理器中,因此具有 options.loaders 属性。

options.loaders的格式如下:

1loaders: {
2  preprocessorName: Loader Definition | Array<Loader Definition>
3}

例如,如果您想在 Vue 组件中使用 SCSS,则将options.loaders设置为:

 1loaders: {
 2  sass: [
 3    {
 4      loader: 'css-loader'
 5    },
 6    {
 7      loader: 'sass-loader',
 8      options: {
 9        indentedSyntax: false // Set to true to use indented SASS syntax.
10      }
11    }
12  ]
13}

它首先用sass-loader处理样式,将其转化为有效的CSS,然后允许webpack的css-loader与它们做任何事情。

好了,继续到下一个规则,那就是babel-loader。

正如测试所指定的,webpack 将通过babel-loader运行所有.js 文件。

我们还看到一个新的属性, exclude. 这是一个regex,它告诉webpack应该忽略哪些模式. 在这种情况下,它排除了在node_modules中的任何.js 文件。

1{
2  test: /\.js$/,
3  loader: 'babel-loader',
4  exclude: /node_modules/
5},

最后的加载器是文件加载器,它将任何导入或链接的文件带到输出目录中。

在此配置中,它将为四个常见的图像格式运行,将其输出到构建目录中,附加了文件内容的哈希(这使得更容易知道文件何时更改)。

例如, ./src/alligator.svg 可能變成 ./dist/alligator.svg?uqTyWCLN8jVxGHFU4kiN1DXB0G6qzDae4Y4kFxZaP4g=

1{
2  test: /\.(png|jpg|gif|svg)$/,
3  loader: 'file-loader',
4  options: {
5    name: '[name].[ext]?[hash]'
6  }
7}

混合的Bits & Bobs

在配置对象的末尾有几个更多属性. 这些更与Webpack的可选功能有关,但无论如何,让我们来看看它们。

 1resolve: {
 2  alias: {
 3    'vue$': 'vue/dist/vue.esm.js'
 4  }
 5},
 6devServer: {
 7  historyApiFallback: true,
 8  noInfo: true
 9},
10performance: {
11  hints: false
12},
13devtool: '#eval-source-map'

*resolve / 化名 - resolve 对象允许您配置 Webpack 模块分辨率如何工作。在这种情况下,我们把vue包改名为vue/dist/vue.esm.js包,它以ES2017模块格式提供Vue。

devServer — devServer让我们可以配置 Webpack 开发服务器。在此情况下,我们只是告诉它回到发送"index.html",用于"404"错误("History ApiFallback"). 所有 无信息 都告诉Webpack, 每次热量重载时, 都不要输出我们不需要的一连串物品。 (_ ( )* ** 业绩** -- -- 类似`业绩 ' 的财产看起来很重要,对不对? 抱歉让你失望了它所做的只是配置 Webpack 的性能提示, 当我们捆绑的文件有点大的时候, 大多会告诉我们。我们暂时取消这个功能。
** devtool** - " devtool " 属性允许您决定使用哪种源绘图方法。大约有12种选择,在速度、质量和生产准备程度方面各不相同。我们在这里使用`eval-source-map',这其实并不伟大,但并不创建任何新文件或修改源. ( (英语)

生产配置

恭喜!我们几乎完成了! 文件的最后一部分是我们正在构建代码的生产版本时所做的配置变化。它看起来比它更可怕。

 1// Make sure to set the NODE_ENV environment variable to 'production'
 2// when building for production!
 3if (process.env.NODE_ENV === 'production') {
 4  // Use standard source mapping instead of eval-source-map.
 5  module.exports.devtool = '#source-map'
 6
 7  // http://vue-loader.vuejs.org/en/workflow/production.html
 8  // Add these plugins:
 9  module.exports.plugins = (module.exports.plugins || []).concat([
10    // Let's your app access the NODE_ENV variable via. window.process.env.
11    new webpack.DefinePlugin({
12      'process.env': {
13        NODE_ENV: '"production"'
14      }
15    }),
16
17    // Crumples your bundled source code into a tiny little ball.
18    // (Minifies it.)
19    new webpack.optimize.UglifyJsPlugin({
20      sourceMap: true,
21      compress: {
22        warnings: false
23      }
24    }),
25
26    // This is just here for compatibility for legacy webpack plugins
27    // with an options format that isn't compatible with Webpack 2.x
28    new webpack.LoaderOptionsPlugin({
29      minimize: true
30    })
31  ])
32}

希望你现在知道足以创建自己的Webpack +Vue设置。

当你怀疑的时候,不要害怕(阅读文档)(LINK0)。