webpack4.x实战四，js和css独立打包

实现分开打包css和js，生成不同的文件 因为浏览器会缓存js和css，每次修改好了js和css，实现打包生成不同的文件名

独立打包js和css文件

安装extract-text-webpack-plugin

执行npm install --save-dev extract-text-webpack-plugin

若后面打包错误，请安装最新版本

npm install --save-dev extract-text-webpack-plugin@next

修改webpack.config.js

const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");

const extractCSS = new extractTextPlugin("css/style.css");
module.exports = {
    mode: 'development',
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: extractCSS.extract({
                    fallback: "style-loader", // 编译后用style-loader来渲染css
                    use: [
                        { loader: 'css-loader' },
                    ]
                })
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './src/template/index.html',
            title: 'this is webpack title'
        }),
        extractCSS
    ]
};
复制代码

说明

fallback: "style-loader", // 编译后用style-loader来渲染css
复制代码

use: [
    {loader:'css-loader'} //解析css
]
复制代码

执行打包 npm run webpack

dist目录

dist
├── css
│   └── style.css
├── index.html
└── js
    └── app.bundle.js

复制代码

浏览器访问dist/index.html

修改js和css后生成不同的文件

修改webpack.config.js filename即可实现

修改后的webpack.config.js

const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");

const extractCSS = new extractTextPlugin("css/[name]-[hash].css");
module.exports = {
    mode: 'development',
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name]-[hash].js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: extractCSS.extract({
                    fallback: "style-loader", // 编译后用style-loader来渲染css
                    use: [
                        { loader: 'css-loader' },
                    ]
                })
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './src/template/index.html',
            title: 'this is webpack title'
        }),
        extractCSS
    ]
};
复制代码

说明

[name]:源文件的文件名称
[hash]:本次打包的所有内容的hash值
复制代码

执行打包 npm run webpack

dist目录

dist
├── css
│   ├── main-4c81874fa8a7d285990e.css
│   └── style.css
├── index.html
└── js
    ├── app.bundle.js
    └── main-4c81874fa8a7d285990e.js
复制代码

总结

插件安装

执行

npm install --save-dev extract-text-webpack-plugin

安装最新版本

npm install --save-dev extract-text-webpack-plugin@next

插件使用

const extractTextPlugin = require("extract-text-webpack-plugin");
复制代码

module.exports rule修改

test: /\.css$/,
use: extractCSS.extract({
    fallback: "style-loader", // 编译后用style-loader来渲染css
    use: [
        { loader: 'css-loader' },
    ]
})

复制代码

更多文档请参考 extract-text-webpack-plugin

思考：js支持ES6,样式支持less、浏览器兼容自动添加前缀

请看webpack4.x实战五，js支持ES6；css支持less、浏览器兼容