一：安装css-loade和style-loader这两个插件
二：配置webpack.config.js文件
- 这是是在app.js里面引入css的,最后打包成js文件。
var path = require('path');
module.exports = {
// 入口
entry: {
app: './src/app.js'
},
// 输出
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader' // 可以把css放在页面上
},
{
loader: 'css-loader' // 放在后面的先被解析
}
]
}
]
}
};
- 配置通过link标签引入css(比较小众，不常用，会引入多个css文件)
var path = require('path');
module.exports = {
// 入口
entry: {
app: './src/app.js'
},
// 输出
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: './dist/', // 配置生成css输出路径
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
// 配置引用css
{
loader: 'style-loader/url' // 可以把css放在页面上
},
{
loader: 'file-loader' // 放在后面的先被解析
}
]
}
]
}
};
三 在style-loader下配置options
insertInto，可以指定加在哪个标签下
singleton，使用一个style标签
transform，tranform 是css的变形函数,相对于webpack.config的路径
var path = require('path');
module.exports = {
// 入口
entry: {
app: './src/app.js'
},
// 输出
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: './dist/', // 配置生成css输出路径
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader', // 可以把css放在页面上
options: {
insertInto: '#app', // 可以指定加在哪个标签下
singleton: true, // 使用一个style标签
transform: './css.transform.js' // transform 是css的变形函数,相对于webpack.config的路径
}
},
{
loader: 'css-loader' // 放在后面的先被解析
}
]
}
]
}
};
同时要在webpack.config.js这个目录下面新建css.transform.js文件
module.exports = function(css) {
// 在浏览器环境执行，不是在webpack打包时执行的
console.log(css);
return css;
}
四：在css-loader下面配置options
- alias 解析别名
- importLoader @import
- Minimize 是否压缩
- modules 启用css-modules（是否启用css模块化）
var path = require('path');
module.exports = {
// 入口
entry: {
app: './src/app.js'
},
// 输出
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: './dist/', // 配置生成css输出路径
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader', // 可以把css放在页面上
options: {
singleton: true, // 使用一个style标签
transform: './css.transform.js' // transform 是css的变形函数,相对于webpack.config的路径
}
},
{
loader: 'css-loader', // 放在后面的先被解析
options: {
minimize: true,
modules: true,
localIdentName: '[path][name]_[local]_[hash:base64:5]'
}
}
]
}
]
}
};
五：使用less预编译语言
- 安装less和less-loader
- 配置webpack.config.js （只需在规则后面添加一条less）
var path = require('path');
module.exports = {
// 入口
entry: {
app: './src/app.js'
},
// 输出
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: './dist/', // 配置生成css输出路径
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.less$/,
use: [
{
loader: 'style-loader', // 可以把css放在页面上
options: {
singleton: true, // 使用一个style标签
transform: './css.transform.js' // transform 是css的变形函数,相对于webpack.config的路径
}
},
{
loader: 'css-loader', // 放在后面的先被解析
options: {
minimize: true,
modules: true,
localIdentName: '[path][name]_[local]_[hash:base64:5]'
}
},
{
loader: 'less-loader'
}
]
}
]
}
};
六：提取css
- 安装
extract-text-webpack-plugin插件（webpack4.0要安装extract-text-webpack-plugin@next） - 引入extract-text-webpack-plugin
- 配置plugins提取css文件
- 配置rules里面的use
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
module.exports = {
// 入口
entry: {
app: './src/app.js'
},
// 输出
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name]-bundle-[hash:5].js' // 带hash值得js
},
// 配置resolve把jQuery解析到想要的目录
resolve: {
alias: {
jquery$: path.resolve(__dirname, 'src/lib/jquery.min.js')
}
},
module: {
// 使用ExtractTextWebpackPlugin配置提取css
rules: [
{
test: /\.less$/,
use: ExtractTextWebpackPlugin.extract({
fallback: {
loader: 'style-loader', // 可以把css放在页面上
options: {
singleton: true, // 使用一个style标签
transform: './css.transform.js' // transform 是css的变形函数,相对于webpack.config的路径
}
},
// 继续处理的loader
use: [
{
loader: 'css-loader', // 放在后面的先被解析
options: {
minimize: true,
modules: true,
localIdentName: '[path][name]_[local]_[hash:base64:5]'
}
},
{
loader: 'less-loader'
}
]
})
},
{ // 加载jQuery
test: path.resolve(__dirname, 'src/app.js'),
use: [
{
loader: 'imports-loader',
options: {
$: 'jquery'
}
}
]
}
]
},
plugins: [
// 提取css文件
new ExtractTextWebpackPlugin({
filename: '[name].min.css'，
allChunks: true // 一开始所有css都打包
}),
new HtmlWebpackPlugin({
template: './index.html', // 文件地址
filename: 'index.html', // 生成文件名字
// inject: false, // 不把生成的css，js插入到html中
chunks: ['app'], //指定某一个入口，只会把入口相关载入html
minify: { // 压缩html
collapseWhitespace: true // 空格
}
})
]
};
