This article goes on. Webpack Installation (1) - Integrated Babel
See the full code for details: https://github.com/lhtzbj12/webpack-demo
1. Pack the CSS file. First install css-loader and style-loader using the following commands
cnpm install --save-dev css-loader style-loader2. If you need to pack scss, you need to install node-sass and sass-loader, using the following commands
cnpm install --save-dev node-sass sass-loader3. To package less, you need to install less and less-loader, using the following commands
cnpm install --save-dev less less-loader4. Build css, scss, less files in src folder
/* 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. Modify src/index.html
<!DOCTYPE html>
<html>
<head>
<title>webpack demo</title>
</head>
<body>
<div class="div1">Hello World test css</div>
<div class="div2">Hello World test scss</div>
<div class="div3">Hello World test less</div>
<script src="bundle.js"></script>
</body>
</html>6. Modify 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. Modify src/main.js, import file (currently, css code will be packaged into bundle.js file, so there is no need to refer to css file in html)
import "./style1.css"
import "./style2.scss"
import "./style3.less"8. Start the service with the npm start command (how to shut down if it has been started before)
npm start9. Each file of css is separated. The generated file is not embedded in bundle.js, but placed in a separate file. Use the Extract Text Plugin plug-in to install it using the following commands.
cnpm install --save-dev extract-text-webpack-pluginModify 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"
}]
})
}Because css is separated from js, it is necessary to refer to index.css generated by css packaging in index.html
<!-- index.html -->
<link rel="stylesheet" type="text/css" href="css/index.css">Using npm run build package, you can generate css/index.css file.
Complete webpack.config.js file
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
main: path.resolve(__dirname, 'src/main.js'), //Entrance
},
output: {
filename: 'bundle.js', //Output filename
path: path.resolve(__dirname, 'build') //The directory where the output file is located
},
devServer: { // Detecting code changes and automatically recompiling and automatically refreshing browsers
contentBase: path.resolve(__dirname, 'build') // Setting the root directory of static resources
},
module: { // How to deal with different types of modules in a project
rules: [ // A rule array that specifies how modules are processed when different modules are created
{
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')
]
}