webpack4.x配置

总结下本身的配置的webpack，但愿能帮助到你们同时也给本身作个笔记。

1.第一步

配置前，咱们新建一个文件夹"project",打开cmd命令输入   npm init   初始化项目。

2.第二部

输入 npm install --save-dev webpack 或 yarn add webpack --dev 安装webpack依赖包。

3.第三部

咱们在“project”新建一个文件夹"src"，"index.html","build"，在“build”文件新建“webpack.base.config.js”，“webpack.dev.config.js”,"webpack.prod.config.js"。

webpack.base.config.js配置以下：

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const merge = require('webpack-merge');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
function resolve(dir) {
    return path.join(__dirname, '..', dir);
}
module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: "js/[hash].js"
    },
    module: {
        rules: [
            {
                // that's your main setup for compiling scss test: /\.scss$/, use:[ MiniCssExtractPlugin.loader, // webpack4.x添加单独处理css { loader:'css-loader', options:{ importLoaders:2 } },//importLoaders表明import进来的资源；2表明css-loader后还须要使用几个loader { loader: 'postcss-loader', options:{ plugins:[require("autoprefixer")({ // 使用postcss-loader给css加前缀 必需要引入"autoprefixer"插件才有效 browsers: ["ios >= 5", "Android >= 2.4", "last 2 versions"] })] } }, { loader: 'sass-loader' } ] }, // { // test: /\.(sa|sc|c)ss$/, // use: [ // "style-loader", // 'css-loader', // 'sass-loader', // ], // include: [resolve('src')] // }, { test: /\.(js|jsx)$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader' }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, // publicPath: '/', // outputPath: 'images/', name: 'images/[name].[ext]?[hash]' } }, // { // test: /\.m?js$/, // exclude: /(node_modules|bower_components)/, // use: { // loader: 'babel-loader', // options: { // presets: ['@babel/preset-env'] // // plugins: ['@babel/plugin-transform-runtime'] // } // } // } ] }, resolve: { extensions: ['.js', '.json', '.scss', '.css'], alias: { "@": path.resolve(__dirname, './src') } }, plugins: [ // new BundleAnalyzerPlugin(), new HtmlWebpackPlugin({ title: '案例', template: 'index.html', inject: true, minify: { removeEmptyElements: true, minifyCSS: true, minifyJS: true } }), new MiniCssExtractPlugin({ filename: "css/[name].css", chunkFilename: '[id].css' }) ] };复制代码

webpack.env.config.js以下：

const webpack = require("webpack");
const merge = require('webpack-merge');
const baseWebapck = require('./webpack.base.config');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(baseWebapck,{
    mode: 'development',
    plugins: [
        new webpack.HotModuleReplacementPlugin() // 使用webpack的热加载须要使用这个插件
    ],
    devServer: {
        open: true,
        hot: true,
        host: 'localhost',
        port: 8080
    }
});

// module.exports = new Promise((resolve, reject) => {
//     resolve(devWebpackConfig)
// })复制代码

webpack.prod.config.js以下：

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const baseWebapck = require('./webpack.base.config');
const merge = require('webpack-merge');
module.exports = merge(baseWebapck, {
    mode: 'production',
    plugins: [
        new BundleAnalyzerPlugin()  // 打包后自动打开浏览器看到打包的体积呈现
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor', // 提取公共代码到vendor
                    chunks: 'all'
                }
            }
        },
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    ie8: true,
                    cache: true,
                    parallel: true
                }
            })
        ]
    }
});复制代码

笔记到此结束。另外想请教下各位packge.json "cross-env"和普通的打包有啥区别吗？

贴个告示：

    本人姓名： xxxxx;

    性别：女；

    身高： 160cm;

    体重：保密；

    职业： 一枚专业的前端工程师；

    外貌： 漂亮。

    程序员小哥哥们，好的工做机会可留言的，欢迎内推。