2.1css以字符串的形式注入到页面中 （1）

webpack(v4版本)

1、编写 css 文件

        文件位置

main.css目录位置

        css 文件内容

main.css

    2、在入口文件中导入css

main.js

    3、直接在控制台执行打包命令（webpack || npm run build），页面控制台报错了

        webpack 可以直接处理 js、json 文件，除此之外别的文件没有办法直接处理，需要借助不同的 load、plugin，才可以进行打包处理。

    4、下载安装 loader

npm i style-loader css-loader -loader

    5、修改配置文件 webpack.config.js

webpack.config.js 处理css文件loader的详解

上配置告诉 Webpack 在遇到以 .css 结尾的文件时先使用 css-loader 读取 CSS 文件，再交给 style-loader 把 CSS 内容注入到 JavaScript 里。 

注意：

☆ use 属性的值需要是一个由 Loader 名称组成的数组，Loader 的执行顺序是由后到前的； 

☆ 每一个 Loader 都可以通过 URL querystring 的方式传入参数，例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。

重新打开 index.html 会神奇的发现 在 main.css 写的样式 生效了！！！

效果图

第一次看到 CSS 被写在了 JavaScript 里！这其实都是 style-loader 的功劳，

style-loader工作原理：大概是把 CSS 内容用 JavaScript 里的字符串存储起来， 在网页执行 JavaScript 时通过 DOM 操作动态地往 HTML head 标签里插入 HTML style 标签。

 可以在打包后生成的文件中找到写的 css 样式，也许你认为这样做会导致 JavaScript 文件变大并导致加载网页时间变长，想让Webpack 单独输出 CSS 文件。下期更新！！

就这样子吧，有问题请指正！