我的webpack路

一直以来都在为项目中webpack,焦头烂额,官网的文档也看过几遍,项目也扒拉扒拉几个看过,收获甚微。
单停止扒拉扒拉却从未停止。
使用webpack-merge区分生成环境和开发环境。将配置拆分简化

  • 很多时候,我们都需要针对不同的环境进行不用的操作。

  • 比如在生成环境下分离css到单独文件:

var extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});

在生成环境下要压缩代码:

new UglifyJSPlugin();
  • 在开发环境下使用代理
devServer:{
   proxy: {
      'api': {
          target: 'http://api.douban.com/v2/movie/',
          secure: false,
          changeOrigin: true
      }
  }

通常会用process.env.NODE_ENV === “development”,并且在package.json中设置环境变量来进行判断,不过当文件大了或者页面需要判断的地方多了之后,配置文件就会充斥着大量三元表达式

可以考虑用webpack-merge将配置文件拆分为3个文件,一个是webpack.common.js,即不管是生产环境还是开发环境都会用到的部分,以及webpack.product.js和webpack.dev.js, 并且使用webpack-merge来合并对象

common.js

 //webpack.common.js
 var path = require('path');
 var HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
     entry: {
         app: './src/index.js'
     },
     output: {
         filename: '[name].bundle.js',
         path: path.resolve(__dirname, 'dist')
     },
     module: {
        rules:[
            {
                 test: /\.js$/,
                 exclude: /node_modules/,
                 use: {
                     loader: 'babel-loader'
                 }
            },
        ]           
     },
    plugins: [
         new HtmlWebpackPlugin({
             title: 'test'
         })
     ],
 }

dev.js

//开发环境webpack.dev.js
var merge = require('webpack-merge');
var common = require('./webpack.common.js');

module.exports = merge(common, {
  module:{
     rules:[
       {
           test: /\.css$/,
           use:["style-loader","css-loader"]
       }
   ]      
 },
  devtool: 'inline-source-map',
  devServer:{
       open:true,  
       hot: true, 
       proxy: {
          '/api/': {
              target: 'http://baidu.com',
              secure: false,
              changeOrigin: true
          }
      }      
    },
})

product.js

//生产环境webpack.product.js
var merge = require('webpack-merge');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
var common = require('./webpack.common.js');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var cleanPlugin = require("clean-webpack-plugin");
var extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
});

module.exports = merge(common, {
    module: {
        rules: [{
            test: /\.css$/,
            use: extractSass.extract({
                use: [{
                    loader: "css-loader"
                }, ],
                fallback: "style-loader"
            })
        }]

    },
    devtool: 'source-map',
    plugins: [
        new cleanPlugin(["dist"]),
        new UglifyJSPlugin(),
        extractSass,
    ]
});

在packjson中修改webpack默认配置文件

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

通过npm run dev以及npm run build来执行对应的操作。

个人的一点分析
这里写图片描述

这个配置不错 https://www.cnblogs.com/whkl-m/p/6627864.html

vue cli打包文件优化工具 webpack-bundle-analyzer

vue-cli的webpack模板项目配置文件分析https://blog.youkuaiyun.com/hongchh/article/details/55113751

### Webpack项目配置和使用指南 #### 配置文件说明 Webpack 的核心配置文件通常命名为 `webpack.config.js`,此文件导出一个 JavaScript 对象来定义各种配置选项[^1]。这个对象包含了入口起点(entry point),输出(output),加载器(loaders)以及插件(plugins)等重要设置。 #### 基础配置实例 下面是一个简单的 Webpack 配置例子: ```javascript const path = require('path'); module.exports = { entry: './src/index.js', // 入口文件径 output: { // 输出设置 filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, mode: 'development' // 构建模式:production 或 development }; ``` #### 不依赖配置文件的方式 除了利用配置文件外,还可以直接通过命令行参数来进行简单构建操作,例如指定输入与输出文件的位置[^2]: ```bash npx webpack src/main.js -o dist/bundle.js ``` #### 环境变量处理 为了更好地管理和区分不同环境下的配置差异(比如开发环境 vs 生产环境),可以通过安装并使用 `cross-env` 工具配合 Webpack 提供的 DefinePlugin 插件实现这一点[^3]: ```bash npm install cross-env --save-dev ``` 接着可以在 package.json 中这样定义脚本: ```json { "scripts": { "build:prod": "cross-env NODE_ENV=production webpack" } } ``` 同时,在 `webpack.config.js` 文件里加入相应的插件配置: ```javascript const webpack = require('webpack'); // ... plugins: [ new webpack.DefinePlugin({ 'process.env': JSON.stringify(process.env) }) ], ``` #### 解决常见问题 当遇到类似于 “Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin’ 这样的模块找不到错误时,这可能是由于版本兼容性问题引起的;建议检查当前使用的 Webpack 版本与其他依赖之间的匹配情况,并考虑更新至最新稳定版或回退到已知工作的组合[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值