webpack -css的引入
前面我们说到webpack-dev-server可以运行的时候将文件解析到内存中直接运行,但是我们没有提到css样式在webpack中的引用:
我们新建了index.scss,然后通过require对css样式进行引入使用,会发现报错,其实就是缺少了css样式的处理工具:
里面的appropriate loader就指明了缺少相应的装载器,此时我们需要去看官网里面所提供的的loader(webpack所有的文件都可以加载成js文件进行使用,)
webpack loader(装载器)
1.安装loader
yarn add css-loader style-loader -D
2.在webpack.config.js中配置:
module: {rules: [{test: /\\.css$/i,use: [\'style-loader\', \'css-loader\'],},],},
webpack.config.js:
const path = require(\'path\')const HtmlWebpackPlugin = require(\'html-webpack-plugin\')// 导出配置module.exports = {entry: { 123: \'./src/123.js\', 789: \'./src/789.js\' },output: {path: path.resolve(process.cwd(), \'dist\'),filename: \'[name]_[chunkhash:8].js\'},plugins: [// 在webpack中使用插件都是通过new实例化来调用的:new HtmlWebpackPlugin({template: \'public/index.html\'})], module: {rules: [{test: /\\.css$/i,use: [\'style-loader\', \'css-loader\'],},],}}
test–要匹配的文件后缀名,
use:使用什么样的装载器,一般是从后往前的顺序去加载
首先通过css-loader进行解析,解析完成后通过style-loader将样式加载到页面里面去
相应的css样式(scss,stylus,less)有对应的预编译语言(scss-loader、less-loader、stylus-loader)
3.yarn build 重新打包一下文件,运行后打开页面(dist/index.html)或者直接yarn dev ,http://127.0.0.1:8000,发现背景色起作用了: