Webpack 学习笔记

原创 zheling 译文 Webpack 153阅读 2018-07-31 15:15:09 举报

1.基本安装

创建一个目录,初始化 npm ,一般是作为项目依赖来安装 Webpack 及 cli 。

2.基本命令

2.1 命令行执行

不加 --config webpack.config.js 默认出入口分别是 ./dist/main.js , ./src/index.js 。

2.2 NPM Script

添加脚本命令别名后,可以使用 npm run build 命令来代替 npx webpack 。

3.资源输入管理

webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件。也就是说,以上列出的那些 JavaScript 的优点(例如显式依赖),同样可以用来构建网站或 web 应用程序中的所有非 JavaScript 内容。

即非 JavaScript 内容需要使用相应的 loader 来引入或进行预处理。
为了从 JavaScript 模块,如入口文件 ./src/index.js 中 import 一个 CSS 文件,需要在webpack.config.js的 module 配置中安装并添加 style-loader 和 css-loader:

再如,其他类型的文件引入到 JavaScript 模块中,
图片、字体则需要使用 file-loader等等。

总结:资源输入一般是在入口文件通过 import 引入,引入不同的文件到 JavaScript 模块时,除了内置支持的 .js .json 文件外,其他类型的资源的引入需要通过安装并在 module 中配置相应的 loader 来引入。

4.输出管理

其实 webpack.config.js 本质就是到处一个 js 对象,所以对于单或多文件的出入口写法,只要遵循 js 对象的写法即可,单值即键值对,多值要么将多个键值对包裹为一个对象,要么将多个对象包裹为一个数组。

此外,还可以在配置文件的plugins配置项中使用插件处理输出,如:
html-webpack-plugins,自动添加 bundle 到 html 中,
clean-webpack-plugin,清理 dist 文件夹。

5.开发相关配置

5.1 devtool:any kind of souce map

为了更容易地追踪错误和警告,JavaScript 提供了 source map 功能,将编译后的代码映射回原始源代码。如果一个错误来自于 b.js,source map 就会明确的告诉你。
source map 有很多不同的选项可用,请务必仔细阅读它们,以便可以根据需要进行配置。

5.2 开发工具

每次要编译代码时,手动运行 npm run build 就会变得很麻烦。
webpack 中有几个不同的选项,可以帮助你在代码发生变化后自动编译代码:
webpack's Watch Mode
webpack-dev-server
webpack-dev-middleware

最常使用的是 webpack-dev-server 。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复