一、使用babel编译es6语法
引入css文件我们只需在入口文件里requirecss文件进来即可,当然也可以使用es6的import语法。这样的话我们得先安装es6转es5的加载器babel啦。具体步骤
1.安装相关模块
npm install --save-dev babel-core babel-loader babel-preset-env
2.在webpack.config.js中添加loader
{
test: /\.js$/,
exclude: [/node_modules/, /lib/],
loader: 'babel-loader'
}
3.根目录新增.babelrc配置文件
{
"presets": ["env"]
}
这里webpack和babel版本需要匹配具体可以参考问题杂记-webpack使用遇到的问题
二、引入css文件
现在我们已经可以使用import语法importcss文件了。这里只是可以import进来,但是样式不会生效,因为我们没有对css文件进行处理所以接下来需要相应的loaderstyle-loader和css-loader来引入css文件并让其生效
1.他们两的作用
css-loader
: 输出CSS作为JS模块style-loader
:使用<style>
将css-loader内部样式注入到我们的HTML页面
2.安装模块
npm install --save-dev style-loader css-loader
3.配置webpack.config.js
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
三、提取css到单独文件
经过前面的步骤我们已经可以将css文件引入到js中了,这里的css会被打包进js文件中,因此无法利用浏览器的异步和并行加载CSS的能力,我们现在需要将css文件单独提取到一个css文件里应该怎么做,这时就需要用到extract-text-webpack-plugin这个插件将其提取出来了
//css
let extractCSS = new ExtractTextPlugin('css/[name].css?[hash]')
let cssLoader = extractCSS.extract({
fallback: "style-loader",
use: "css-loader"
})
module: {
rules: [{
test: /\.css$/,
exclude: /node_modules/,
loader: cssLoader
},
...]
}
plugins: [
//...,
extractCSS
]
编译结果
四、图片字体等的引入
有的css中使用了字体等,这时我们需要使用file-loader或者url-loader进行加载
file和url的区别是url封装了file-loader功能更强大,可以将小文件编码并返回DataURL
1.安装
npm -i -d url-loader file-loader
2.配置
{
test: /\.(png|svg|jpg|gif)$/,
use: [{
loader: 'file-loader',
},
{
loader: 'image-webpack-loader', //压缩
options: {
bypassOnDebug: true,
},
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
五、html中直接使用img标签src加载图片
使用html-withimg-loader 详细介绍点击打开链接
const htmlPlugin = new HtmlWebpackPlugin({
filename: `${filename}.html`,
template: `html-withimg-loader!${filePath}`,
chunks: [filename,'vendor'],
});
在此,基本上算是处理完了,其它的需求再根据自己的需要使用相应的加载器、插件即可
源码地址点击下载