webpack线上和线下模式

区别:

1 线下模式代码没有压缩,source-map是全的,比较容易定位错误,调试方便

2 线上模式的代码是压缩的,文件小,

 

分开打包:

方式一:有点麻烦

在package.json文件

"scripts": {
"dev-build": "webpack --config webpack.dev.js",  可以看到打包后的文件
"dev": "webpack-dev-server --config webpack.dev.js",    文件在内存中,无法看到文件

"build": "webpack --config webpack.prod.js" }, 线上模式打包

建立线下配置文件 webpack.dev.js

建立线上配置文件 webpack.prod.js

方式二:

结合方式一,再创建一个webpack.common.js, 文件内放入共用配置,然后就可以清除webpack.dev.js和webpack.prod.js配置文件共用的配置

再安装一个模块: webpack-merge 就成这样了:

webpack.dev.js

复制代码
const Webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

const devConfig = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  output: {
    publicPath: '/',
  },
  devServer: {
    contentBase: './dist',
    open: true,
    port: 8090,
    hot: true,
    hotOnly: true
  },
  plugins: [
    new Webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
   usedExports: true
}
}

module.exports = merge(devConfig, commonConfig);
复制代码

webpack.prod.js:

复制代码
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

const prodConfig ={
    mode: 'production',
    devtool: 'cheap-module-source-map',
}

module.exports = merge(prodConfig, commonConfig);
复制代码

webpack.common.js:

复制代码
const path = require('path');
const HtmlWebapackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 10240
                }
            } 
        }, { 
            test: /\.js$/, 
            exclude: /node_modules/, 
            loader: "babel-loader",
        }, {
            test: /\.(eot|svg|ttf|woff)$/,
            use: [
                'file-loader'
            ]
        }, {
            test: /\.scss$/,
            use: [
                'style-loader', 
                'css-loader', 
                'sass-loader',
                'postcss-loader'
            ]
        },{
            test: /\.css$/,
            use: [
                'style-loader', 
                'css-loader',
                'postcss-loader'
            ]
        }]
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebapackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin({
			cleanAfterEveryBuildPatterns: ['dist'],
			root: path.resolve(__dirname, '../')
		}),
    ]
}
View Code
复制代码

然后在项目根目录建立build目录,将三个配置文件 放在build目录下,但需要注意路径问题

在package.json中写入命令

"scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
  },

PS:改变配置文件目录后要注意路径问题 比如配置中 path.resolve(__dirname, '../dist')是相对于配置文件的路径找 ../dist目录 ,但是其他的 template: './src/index.html' 中是找package.json相对的./src/index.html文件

posted @   study_php_java_C++  阅读(442)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示