webpack实际开发，引入jquery,压缩css

安装

npm i expose-loader --save
npm install jquery --save

第一种方法：在打包入口文件中直接require并用expose-loader暴露$到全局
打包入口文件./src/index.js中引入JQuery:

require("expose-loader?$!jquery");
$("body").append('<h3>你好jquery</h3>');

第二种方法：在打包入口文件引入JQuery，在配置文件中暴露到全局

const path = require("path");
module.exports = {
    mode: "development", //打包为开发模式
    entry: "./src/index", //入口文件
    output: { //输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径
        path: path.resolve(__dirname, "../dist"),
        filename: "main.js"
    },
    module: {
        rules: [
            //暴露$和jQuery到全局
            {
                test: require.resolve('jquery'), //require.resolve 用来获取模块的绝对路径
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                }, {
                    loader: 'expose-loader',
                    options: '$'
                }]
            }
        ]
    }
}

入口文件

require("jquery");

压缩css

webpack.config.js

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin')



module.exports = {
    mode: "production", //打包为开发模式
    optimization: {
        // minimize: true,
        minimizer: [new OptimizeCSSAssetsPlugin({})],

    },
    entry: {
        index: './src/index.js',
        user: './src/user.js'
    },
    plugins: [

        new OptimizeCSSAssetsPlugin({
            assetNameRegExp: /\.style\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { discardComments: { removeAll: true } },
            canPrint: true
        }),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Production'
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: 'css/[name].css'

        })
    ],
    module: {
        rules: [


            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader

                    },
                    'css-loader'

                ],
            },
        ],
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

编译less,sass

npm install less-loader --save-dev

npm install sass-loader --save-dev

一定要先安装npm install less --save-dev
不然会报错

ERROR in ./src/css/index.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/css/index.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):
Error: Cannot find module 'less'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (E:\www\fang\webpack\demo4\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (E:\www\fang\webpack\demo4\node_modules\less-loader\dist\index.js:8:36)
    at Module._compile (E:\www\fang\webpack\demo4\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)

const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin')


module.exports = {
    mode: "production", //打包为开发模式
    optimization: {
        // minimize: true,
        minimizer: [new OptimizeCSSAssetsPlugin({})],

    },
    entry: {
        index: './src/index.js',
        user: './src/user.js'
    },
    plugins: [

        new OptimizeCSSAssetsPlugin({
            assetNameRegExp: /\.style\.css\.less$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: {discardComments: {removeAll: true}},
            canPrint: true
        }),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Production'
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: 'css/[name].css'

        })
    ],
    module: {
        rules: [


            {
                test: /\.(sa|sc|c|le)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader

                    },
                    'css-loader',
                    'less-loader'



                ],
            }
        ],
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};