为什么用 webpack
webpack 官网传送门 …
- 官网:webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。
- 总结:汇总所有模块,整理出一个或者多个 bundles 。如果有浏览器不认识的语言,通过其核心 module 让浏览器能识别的语言。如果有未能处理的情况,可以尝试 plugins 去解决。
五大核心之:入口(entry)
module.exports = {
entry: './path/to/my/entry/file.js',
};
五大核心之:出口(output)
module.exports = {
output: {
filename: 'bundle.js',
},
};
五大核心之:加载器(module)
- test 属性,识别出哪些文件会被转换。
- use 属性,定义出在进行转换时,应该使用哪个 loader。
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
五大核心之: 插件(plugin)
module.exports = {
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
五大核心之:模式(mode)
module.exports = {
mode: 'development',
};