处理style文件

话说html都打包过去了，js也打包过去了，新的html文件和js产生，如果更换了存储文件夹(一般都会)，那么这些打包生成的文件对于资源的引入就会产生错误，那么我们css文件也需要重新处理过，避免路径但不限于的错误；

安装相关工具模块

css-loader style-loader

#-D = --save-dev 放在前面后面都无所谓
npm i -D css-loader style-loader

在这里插入图片描述

配置css打包参数

配置css的打包规则，注意使用包的顺序，就和script加载顺序一个意思，后面看不到前面

{
   test: /\.css$/,
   use: ["style-loader", "css-loader"]
}

在这里插入图片描述

不知道其他部分代码的看我前两篇webpack的文章，里面有html和js的打包详细教程。
这就是新生成的style.css文件，并自动引入进去，当然，原来的css文件自然会出现resourceload error错误；

如果我，用开发环境模式打包：

在这里插入图片描述

新的文件夹里没有style.css，按照原来的路径肯定出错
在这里插入图片描述

我的css：
在这里插入图片描述

在这里插入图片描述

但是，看控制台Elements：
在这里插入图片描述

这里自动增加了style标签有没有！

我们再看看打包好的js，里面自动增加了一个控制css的代码，功能就是在head里添加样式表！

在这里插入图片描述

安装处理SASS的工具

npm i -D sass-loader node-sass

在这里插入图片描述

还需要安装文件分离并独立出来的插件

npm i -D extract-text-webpack-plugin@next # next代表最新版，因为3.x版本已经不支持安装，而防止服务方没有将默认指令指向最新版而主动申请更新最新版

可能会出现安装到测试版，并无大碍：
在这里插入图片描述

extract-text-webpack-plugin插件使用方法

使用extract-text-webpack-plugin插件打包css

正常css文件

重新配置参数：

使用文件分离插件，新增style.css

plugins: [
    new HtmlWebpackPlugin({ // Also generate a test.html
    	title: "new html",
        filename: 'test.html',
        template: "template.html"
    },
    new ExtractTextPlugin("style.css"))
],
module: {
    rules: [{
	        test: /\.js$/,
	        use: 'babel-loader',
	        exclude: /node_modules/
	    },
	    {
		    test: /\.css$/,
		    use: ExtractTextPlugin.extract({
		        fallback: "style-loader",
		        use: "css-loader"
		    })
	    }
	]
}