跟着官方指南学webpack之loader（037）

跟着官方指南学webpack之loader

webpack 开箱即用，可以无需使用任何配置文件。然而，webpack 会假定项目的入口起点为 src/index.js，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。

通常你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个 webpack.config.js 文件，然后 webpack 会自动使用它。
1.目录结构

2.项目初始化
F:\myVue\webpack-loader>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See npm help init for definitive documentation on these fields
and exactly what they do.

Use npm install <pkg> afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (webpack-loader)
version: (1.0.0)
description:
entry point: (webpack.config.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to F:\myVue\webpack-loader\package.json:

{
“name”: “webpack-loader”,
“version”: “1.0.0”,
“description”: “”,
“main”: “webpack.config.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”
},
“author”: “”,
“license”: “ISC”
}
Is this OK? (yes)
不是重点！
多了这个文件：
2.2 安装webpack
npm install webpack --global //安装全局
npm install webpack webpack-cli --save-dev //安装本地

F:\myVue\webpack-loader>npm install webpack webpack-cli --save-dev
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN webpack-loader@1.0.0 No description
npm WARN webpack-loader@1.0.0 No repository field.

• webpack-cli@4.7.2
• webpack@5.42.1

install可简写为i,–global可简写为-g,–save-dev可简写为-D(这个命令是用于把配置添加到package.json的开发环境配置列表中，后面会提到)，–save可简写为-S

3.index.htlm引入main.js(注意是打包后的文件）

4.index.js中导入css文件

5.安装loader
npm i style-loader css-loader -D
F:\myVue\webpack-loader>npm i style-loader css-loader -D
npm WARN webpack-loader@1.0.0 No description
npm WARN webpack-loader@1.0.0 No repository field.

• style-loader@3.0.0
• css-loader@5.2.6

6.配置loader
webpack.config.js中
module.exports = {
module: {
rules: [
{
test: /.css$/i,
use: [‘style-loader’, ‘css-loader’],
},
],
},
};

**test: /.css$/i,**这个地方让我浪费了一上午！！！
官网上还不一样

7.项目中webpack(非全局）

插入蓝色那条语句。

8.打包
F:\myVue\webpack-loader>npm start


成功！！！。