webpack 学习之 五大核心

为什么用 webpack

webpack 官网传送门 ...

• 官网：webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
• 总结：汇总所有模块，整理出一个或者多个 bundles 。如果有浏览器不认识的语言，通过其核心 module 让浏览器能识别的语言。如果有未能处理的情况，可以尝试 plugins 去解决。

五大核心之：入口（entry）

 module.exports = {
 // 让webpack 知道，从那个文件开始，相当于一个树形的根元素的指定
  entry: './path/to/my/entry/file.js',
};

五大核心之：出口（output）

module.exports = {
  output: {
  	// 配置输出的 bundles 名称，名字自己定义
    filename: 'bundle.js',
  },
};

五大核心之：加载器（module）

• test 属性，识别出哪些文件会被转换。
• use 属性，定义出在进行转换时，应该使用哪个 loader。

module: {
	// 「在 require()/import 语句中被解析为 '.txt' 的路径」时，
	//  对它打包之前，先 use(使用) raw-loader 转换一下。
   rules: [{ test: /\.txt$/, use: 'raw-loader' }],
 },

五大核心之： 插件（plugin）

module.exports = {
	// html-webpack-plugin 为应用程序生成一个 HTML 文件
	// 并自动将生成的所有 bundle 注入到此文件中。
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

五大核心之：模式（mode）

module.exports = {
// 如果没有设置，webpack 会给 mode 的默认值设置为 production
 mode: 'development',
};