此文接着《Webpack安裝(1)-集成Babel》
完整代碼詳見:https://github.com/lhtzbj12/webpack-demo
1、打包css文件,先使用下面的命令安裝css-loader和style-loader
cnpm install --save-dev css-loader style-loader
2、需要打包scss,則需要安裝node-sass和sass-loader,採用以下命令安裝
cnpm install --save-dev node-sass sass-loader
3、需要打包less,則需要安裝less和less-loader,採用以下命令安裝
cnpm install --save-dev less less-loader
4、在src文件夾裏建css、scss、less文件
/* style1.css */
@charset "utf-8";
.div1{ background: #ff0000;}
/* style2.scss */
@charset "utf-8";
$base-color:#ffff00;
.div2{ background: $base-color;}
/* style3.less */
@base-color:#0000ff;
.div3{ background: @base-color;}
5、修改src/index.html
<!DOCTYPE html>
<html>
<head>
<title>webpack demo</title>
</head>
<body>
<div class="div1">Hello World 測試css</div>
<div class="div2">Hello World 測試scss</div>
<div class="div3">Hello World 測試less</div>
<script src="bundle.js"></script>
</body>
</html>
6、修改webpack.config.js
...
{
test: /\.css$/,
use: [ 'style-loader','css-loader']
},
{
test: /\.scss$/,
use:[ 'style-loader','css-loader','sass-loader'],
},
{
test: /\.less$/,
use:[ 'style-loader','css-loader','less-loader'],
}
...
7、修改src/main.js,import文件(目前,css代碼將打包到bundle.js文件裏,因此html裏不需要引用css文件)
import "./style1.css"
import "./style2.scss"
import "./style3.less"
8、使用npm start命令啓動服務(如何之前已啓動,則需要關閉)
npm start
9、css各文件分離,生成的文件 不嵌入bundle.js,而是放在單獨的文件裏。使用Extract Text Plugin插件,使用下面的命令安裝。
cnpm install --save-dev extract-text-webpack-plugin
修改webpack.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');
plugins: [
new ExtractTextPlugin('css/index.css')
]
{
test: /\.css$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:"css-loader"
})
},
{
test: /\.scss$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:[{
loader:"css-loader"
},{
loader:"sass-loader"
}]
})
},
{
test: /\.less$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:[{
loader:"css-loader"
},{
loader:"less-loader"
}]
})
}
由於css與js分離,因此,index.html裏需要引用css打包生成的的index.css
<!-- index.html -->
<link rel="stylesheet" type="text/css" href="css/index.css">
使用npm run build打包,就可以生成css/index.css文件。
完整的webpack.config.js文件
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
main: path.resolve(__dirname, 'src/main.js'), //入口
},
output: {
filename: 'bundle.js', //輸出的文件名
path: path.resolve(__dirname, 'build') //輸出文件所在的目錄
},
devServer: { // 檢測代碼變化並自動重新編譯並自動刷新瀏覽器
contentBase: path.resolve(__dirname, 'build') // 設置靜態資源的根目錄
},
module: { // 如何處理項目中不同類型的模塊
rules: [ // 用於規定在不同模塊被創建時如何處理模塊的規則數組
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: path.resolve(__dirname, 'node_modules'),
include: path.resolve(__dirname, 'src'),
},
{
test: /\.css$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:"css-loader"
})
},
{
test: /\.scss$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:[{
loader:"css-loader"
},{
loader:"sass-loader"
}]
})
},
{
test: /\.less$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:[{
loader:"css-loader"
},{
loader:"less-loader"
}]
})
}
]
},
plugins: [
new ExtractTextPlugin('css/index.css')
]
}