webpack分离css和js

下载各种loader:
babel-loader （解析 es6/7 -> es5）
@babel/core（4.0） （这个文件编译器）
@babel/preset-env（4.0） (生成es5标准)
css-loader （处理css）
sass-loader （处理sass） node-sass（编译器）
style-loader （给你HTML页面 插入style标签生成css代码）
file-loader （文件加载器 开发文件src 打包到dist目录下）
url-loader (css 背景图片 html )

webpack.config.common.js

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    entry: {
        index: path.resolve(__dirname, 'src')+'/index.js',
        module: path.resolve(__dirname, 'src')+'/module.js',
    },
    devServer: {
        contentBase: './dist'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'assets/js/[name].bundle.min.js',
        //publicPath: 'assets'
    },
    module: {
        rules: [  //根据不同的文件 使用不同的解析模块
            {
                test: /\.js$/,
                exclude: [
                    path.resolve(__dirname, "node-modules")
                ],
                use: [ {loader:'babel-loader'}]
            },
            {
                test: /\.(scss|css)$/,
                use: [ 
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            //publicPath: '../',
                            //hmr: process.env.NODE_ENV === 'development',
                        },
                    }, 
                    'css-loader',
                    'sass-loader',
                   {
                        loader:'postcss-loader',
                        options:{
                            plugins:[
                                require('autoprefixer')({
                                    browsers: ['>1%','last 2 versions'] 
                                })
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.(png|svg|jpg|gif|eot|ttf|woff|woff2|ico)$/,
                use: [
                    { 
                        loader: 'url-loader',
                        options: {
                            limit: 100000,   //10k 一下转成base64
                            name: '[name].[ext]',
                            outputPath: 'assets/images', // 输出路径
						    publicPath: '../images' 
                        }

                    }
                ]
            }
        ]
    },
    optimization: {  //真多有类行嘞文件
        splitChunks: {  //分块
            chunks: "all",  //  async
            minSize: 20,    //单位字节 很重要 决定了如何拆分文件
            name: 'common'
        }
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
          filename: 'assets/css/[name].css',
          chunkFilename: 'assets/css/[id].css',
          ignoreOrder: false,
        })
    ],
    resolve: {    //解析模块的可选项
        //modules: []. //模块的查找目录  配置其他的css等文件
        extensions: [".js", ".jsx", ".css", ".scss"], //用到的文件的扩展名
        alias: {
            utils:path.resolve(__dirname,'src/uils')   //如果出现重名 如何设置别名
        }
    }
}

webpack.config.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.config.common.js');
let dev = module.exports = {
    mode: 'development',   //指定模式
    devtool: 'source-map',
}
module.exports = merge(common, dev);

webpack.config.pro.js

const merge = require('webpack-merge');
const common = require('./webpack.config.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
let pro = module.exports = {
    mode: 'production',   //指定模式
    plugins: [
        new HtmlWebpackPlugin({
            title:'webpack demo',   //如果配置了模板 选项无效
            //template: './src/index.html', // 源模板文件
            filename: './index.html', // 输出文件【注意：这里的根路径是module.exports.output.path】
            showErrors: true,   //开发阶段 
            inject: 'body',
            chunks: ['index', 'common']
        })
    ],
}
module.exports = merge(common, pro);