记性不好的我又来拉。
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
webpack主要有四个概念:
- 入口(entry)
- 出口(output)
- 插件(plugins)
- 加载器(loader)
以vue webpack配置为例
// webpack.base.conf.js
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'),resolve('node_modules/webpack-dev-server/client')]
},
}
入口(entry)
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。
对于vue来说就是main.js。出口(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件。加载器(loader)
loader 用于对模块的源代码进行转换
例如,你可以使用 loader 告诉 webpack 加载 CSS 文件,或者将 TypeScript 转为 JavaScript。为此,首先安装相对应的 loader,如上示例中是vue和babel的加载器。- 插件(plugins)
插件目的在于解决 loader 无法实现的其他事。