1、首先安装style-loader css-loader
npm i style-loader css-loader --save-dev
配置文件:
test:/\.css$/,
loader:'style-loader!css-loader'
需要在样式中设置现在浏览器不是很支持的属性,比如flex,这是需要加浏览器前缀,此时用到postcss-loader,先安装
npm i postcss-loader --save-dev
通过配置options来设置插件,记得安装。
var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path')
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'js/[name].bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
// exclude:__dirname+'node_modules',//不对这个进行babel转换,这里边已经打包好,这样能减少打包时间
// include:__dirname+'src',
exclude: path.resolve(__dirname, 'node_modules'),
include: path.resolve(__dirname, 'src'),
query: { //若在package.json中定义了这个presets,则这边可以删掉
presets: ['latest']
}
}],
rules: [{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } }, //1这个number指的是在css-loader之后引用几个loader来处理import进来的文件
{
loader: 'postcss-loader',
options: {
plugins: [
require('postcss-import')(),
require('autoprefixer')({//浏览器前缀
browsers: ['last 5 versions']
})
]
}
}
]
},
{
test:/\.less$/,//在前边css匹配中设置了importLoaders后,在less匹配时不用在配置
use:[
'style-loader',
'css-loader',
{loader:'postcss-loader',options:{
plugins: [
require('autoprefixer')({//浏览器前缀
browsers: ['last 5 versions']
})
]
}},
'less-loader'
]
},
{
test:/\.scss$/,//在前边css匹配中设置了importLoaders后,在less匹配时不用在配置
use:[
'style-loader',
'css-loader',
{loader:'postcss-loader',options:{
plugins: [
require('autoprefixer')({//浏览器前缀
browsers: ['last 5 versions']
})
]
}},
'sass-loader'
]
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body',
title: 'this is a complete webpack demo'
})
]
}
网友评论