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;

    體重：保密；

    職業： 一枚專業的前端工程師；

    外貌： 漂亮。

    程序員小哥哥們，好的工做機會可留言的，歡迎內推。