Webpack基础应用篇

1、webpack基础应用篇1.6.1 什么是loader webpack 只能理解 javascript 和 json 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供给用程序用法，以及被添加到依靠图中。 在 webpack 的配置中，loader 有两个属性： test 属性，识别出哪些文件会被转换。 use 属性，定义出在举行转换时，应当用法哪个 loader。 const path = require(&39;path&39;); module.exports = output: fi

2、lename: &39;my-first-webpack.bundle.js&39;, , module: rules: test: /.txt$/, use: &39;raw-loader&39; , , ; 以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必需属性：test 和 use。这告知 webpack 编译器(compiler) 如下信息： 嘿，webpack 编译器，当你遇到在 require()/import 语句中被解析为 ‘.txt’ 的路径时，在你对它打包之前，先 u

3、se(用法) raw-loader 转换一下。 1.6.2 加载css 为了在 javascript 模块中 import 一个 css 文件，你需要安装 style-loader 和 css-loader，并在 module 配置 中添加这些 loader： felix webpack5 $ npm install -save-dev style-loader css-loader 1 修改配置文件： module: rules: test: /.css$/i, use: &39;style-loader&39;, &39;css-loader&39;, ,

4、, 07-manage-assets/webpack.config.js /. module.exports = /. / 配置资源文件 module: rules: /. test: /.css$/i, use: &39;style-loader&39;, &39;css-loader&39;, , , , /. 模块 loader 可以链式调用。链中的每个 loader 都将对资源举行转换。链会逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 javas

5、cript。 应保证 loader 的先后挨次：&39;style-loader&39; 在前，而 &39;css-loader&39; 在后。假如不遵守此商定，webpack 可能会抛出错误。webpack 按照正则表达式，来确定应当查找哪些文件，并将其提供应指定的 loader。在这个示例中，全部以 .css 结尾的文件，都将被提供应 style-loader 和 css-loader。 这使你可以在依靠于此样式的 js 文件中 import &39;./style.css&39;。现在，在此模块执行过程中，含有 css 字符串的 标签，将被插入到 html