webpack学习笔记（三）

使用plugin扩展功能，之前css是直接在js文件里，现在把css提取到单独的文件里

先用命令行在当前目录下执行命令，下载依赖：mini-css-extract-plugin

npm install --save-dev mini-css-extract-plugin

npm install --save-dev mini-css-extract-plugin

该插件将 CSS 提取到单独的文件中。它为每个包含 CSS 的 JS 文件创建一个 CSS 文件

接上一篇

项目下新建文件

和之前不同，这次几个文件我分到不同文件夹，如下：

|—根目录
    |—src
        |—pages
            |—index.css
            |—index.html
            |—show.js
        |—main.js
    |—package-lock.json
    |—package.json
    |—webpack.config.js

|—根目录
    |—src
        |—pages
            |—index.css
            |—index.html
            |—show.js
        |—main.js
    |—package-lock.json
    |—package.json
    |—webpack.config.js

然后新建文件 index.html

文件有修改

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo1</title>
    <!-- 导入webpack输出的css文件 -->
    <link rel="stylesheet" href="../dist/index.css">
</head>
<body>
<div id="app"></div>
<!-- 导入webpack输出的javascript文件 -->
<script src="../dist/bundle.js"></script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo1</title>
    <!-- 导入webpack输出的css文件 -->
    <link rel="stylesheet" href="../dist/index.css">
</head>
<body>
<div id="app"></div>
<!-- 导入webpack输出的javascript文件 -->
<script src="../dist/bundle.js"></script>
</body>
</html>

index.css这个是新加的文件

css

#app{
    text-align: center;
    color: red;
    font-size: 100px;
}

#app{
    text-align: center;
    color: red;
    font-size: 100px;
}

show.js 测试方法

// 操作dom元素，将content显示到dom上
function show (content){
    window.document.getElementById('app').innerText = 'Hello ,' + content; 
}
// 导出show方法
module.exports = show;

// 操作dom元素，将content显示到dom上
function show (content){
    window.document.getElementById('app').innerText = 'Hello ,' + content; 
}
// 导出show方法
module.exports = show;

main.js 入口文件

导入新加的css文件

//导入css文件
import './pages/index.css';
// 导入show方法
const show = require('./pages/show.js');
show('webpack');

//导入css文件
import './pages/index.css';
// 导入show方法
const show = require('./pages/show.js');
show('webpack');

webpack.config.js项目执行时会自动加载根目录的webpack.config.js配置文件

修改文件

const path = require('path');

//新添加
// 导入mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './main.js',
output: {
filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    
    //新添加
    plugins: [new MiniCssExtractPlugin({
// 输出css文件命名
        filename: "index.css",
    })],
    module: {
        rules: [
            {
                // 用正则表达式去匹配要用该loader转换的css文件
                test: /\.css$/,
                // 新增修改
                // use: ['style-loader','css-loader'],
                use: [MiniCssExtractPlugin.loader,'css-loader'],
            }
        ]
    }
}

const path = require('path');

//新添加
// 导入mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './main.js',
output: {
filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    
    //新添加
    plugins: [new MiniCssExtractPlugin({
// 输出css文件命名
        filename: "index.css",
    })],
    module: {
        rules: [
            {
                // 用正则表达式去匹配要用该loader转换的css文件
                test: /\.css$/,
                // 新增修改
                // use: ['style-loader','css-loader'],
                use: [MiniCssExtractPlugin.loader,'css-loader'],
            }
        ]
    }
}

然后命令窗口执行npm run start

现在看dist目录下，js和css文件已经分开了

然后在浏览器打开index.html

样式一切正常。

本文到此结束。

反馈信息

INFO

邮箱： open_teams@163.com

webpack学习笔记（三） ​

反馈信息 ​

webpack学习笔记（三）

反馈信息