努力成为一名webpack配置工程师~~~
安装
使用 npm 安装,一般安装为 devdependency:
1 | npm install webpack --save-dev |
然后再 package.json 中添加一个 script :
1 | "scripts": { |
执行了 npm run bulid
的时候,就会在目录下寻找 webpack.config.js
配置文件并执行。
入口
入口表示打包的依赖的开始。使用 entry
字段表示:
1 | // 或者配置多个入口 |
loader
loader 是一种转换器,将某种类型的文件格式转为 webpack 可以支持的打包的模块。比如可以通过 vue-loader 解析 .vue 文件,将其转换为 js 代码。
使用 module.rules
表示:
1 | module: { |
plugin
模块代码转换的工作由 loader 来处理,除此之外的其他任何工作都可以交由 plugin 来完成。
比如使用 uglifyjs-webpack-plugin 压缩 JS 代码
1 | const UglifyPlugin = require('uglifyjs-webpack-plugin') |
DefinePlugin 是 webpack 内置的插件,可以使用 webpack.DefinePlugin
直接获取。这个插件用于创建一些在编译时可以配置的全局常量:
1 | module.exports = { |
有了上面的配置,就可以在应用代码文件中,访问配置好的变量了,如:
1 | console.log("Running App version " + VERSION); |
copy-webpack-plugin 用来把资源文件移动到指定目录下:
1 | const CopyWebpackPlugin = require('copy-webpack-plugin') |
输出
输出即指 webpack 最终构建出来的静态文件,使用 output
字段:
1 | module.exports = { |
解析
resolve
表示如何解析。
使用 resolve.alias
来创建别名:
1 | module.exports = { |
如果原来使用相对路径:
1 | import Utility from '../../utilities/utility'; |
现在就可以使用绝对路径了:
1 | import Utility from 'Utilities/utility'; |
使用 resolve.extensions
解析相应类型:
1 | module.exports = { |
使用 resolve.modules
配置模块的搜索路径:
1 | resolve: { |