二、webpack4.0配置篇

本文详细介绍了webpack4.0的配置,包括打包多页应用、配置source-map、使用watch、小插件应用、解决跨域问题、resolve属性配置、定义环境变量以及如何根据环境进行差异化配置。通过实例展示了如何设置webpack配置文件,以实现高效开发和部署。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、打包多页应用

新建一个项目,里面新建src目录,在src目录新建index.js 和 other.js。

webpack

src/index.js:

console.log('index.js')

src/other.js:

console.log('other.js')

初始化package.json:

npm init -y

 安装:

npm install webpack webpack-cli -D

 在根目录新建一个配置文件webpack.config.js。

webpack.config.js:

let path = require('path');
module.exports = {
    // 模式
    mode: 'development',
    // 多入口,要打包多个文件
    entry: {
        home: './src/index.js',
        other: './src/other.js'
    },
    output: {
        // [name] 代表的是home 或者 other
        // [hash] 代表的是hash值
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist')
    }
}

运行:

npx webpack

打包结果:

生成两个js文件。

webpack

 

2、对html页面进行打包。

安装:

npm install html-webpack-plugin -D

html-webpack-plugin的作用,就是利用我们的html模板,打包成新的html文件,并自动把我们的js文件插入到html中去。 

在根目录下,新建index.html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

 在webpack.config.js中进行配置:

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 模式
    mode: 'development',
    // 多入口,要打包多个文件
    entry: {
        home: './src/index.js',
        other: './src/other.js'
    },
    output: {
        // [name] 代表的是home 或者 other
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 选择一个html文件作为模板
            template: './index.html',
            // 打包后生成的html文件名
            filename: 'home.html',
            // chunks是代码块
            // 保证home.html只引入home.js
            chunks: ['home']
        }),
        new HtmlWebpackPlugin({
            // 选择一个html文件作为模板
            template: './index.html',
            // 打包后生成的html文件名
            filename: 'other.html',
            // chunks是代码块
            // 让other.html 同时引入 other.js 和 home.js 文件。
            chunks: ['other','home']
        })
    ]
}

 运行:

npx webpack

打包结果:

 webpack

其中other.html文件同时引入了home.js 和 other.js 。

 

二、配置source-map

我们可能会把高级语法(比如: ES6、7)转成低级语法(比如:ES5) ,而配置一些babel相关的内容。

安装babel:

npm install @babel/core @babel/preset-env babel-loader webpack-dev-server -D

@babel/preset-env 是用来将ES6语法转换成ES5语法的。 

在src/index.js里面写些ES6的语法:

console.log('index.js')

// ES6语法
class Log {
  constructor () {
    console.lo('出错了')
  }
}
let log = new Log()

在webpack.config.js中进行配置:

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 模式
  // 生产环境下会自动将打包后的js进行压缩
  mode: 'production',
  entry: {
    home: './src/index.js'
  },
  // 规则
  module: {
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          // 使用babel将ES6语法转换成ES5语法
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  // (1) 第一种方式
  // 调试代码,需要源码映射
  // 增加映射文件, 可以帮我们调试源代码
  // source-map 就叫源码映射,会单独生成一个sourcemap文件,叫 home.js.map
  // 而且出错了,会标识当前报错的列和行
  devtool: 'source-map',


  // (2) 第二种方式
  // eval-source-map 不会产生单独的文件,但是可以显示行和列。
  // devtool: 'eval-source-map',


  // (3) 第三种方式
  // 不会产生列,但是会产生一个单独的映射文件
  // 产生后你可以保留起来,用于调试
  // devtool: 'cheap-module-source-map',


  // (4) 第四种方式
  // 不会生成文件,集成在打包后的文件中,不会产生列
  // devtool: 'cheap-module-eval-source-map',
    
  output: {
    // [name] 代表的是home 或者 other
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 选择一个html文件作为模板
      template: './index.html',
      // 打包后生成的html文件名
      filename: 'index.html'
    })

  ]
}

source-map 的作用,是用来生成一个映射文件,然后查看错在第几行和第几列,用来调试代码。 

 在package.json里面配置一下启动脚本:

  "scripts": {
    "dev" : "webpack-dev-server",
    "build" : "webpack"
  },

所以,npm run build 就相当于 npx webpack。 

进行打包:

npm run build

会生成一个独立的 home.js.map 文件, 用来调试代码。

运行:

npm run dev

来起一个服务。

 

三、watch的用法

我们希望改完代码之后,可以自动重新打包出实体文件。

src/index.js:

console.log('index.js')

// ES6语法
class Log {
  constructor () {
    console.log('出错了')
  }
}
let log = new Log()

在webpack.config.js中进行配置:

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 模式
  // 生产环境下会自动将打包后的js进行压缩
  mode: 'production',
  entry: {
    home: './src/index.js'
  },
  // 规则
  module: {
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          // 使用babel将ES6语法转换成ES5语法
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  // 监控当前代码的变化
  // 代码一变化,就帮我实时打包。生成实体文件。
  watch: true,
  // 监控的选项
  watchOptions: {
      poll: 1000, // 每秒 问我 1000次
      aggregateTimeout: 500, // 防抖, 500毫秒内我输入的东西,只打包一次
      // 忽略这个文件夹,不监控 node_modules 目录
      ignored: /node_modules/
  },
  output: {
    // [name] 代表的是home 或者 other
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 选择一个html文件作为模板
      template: './index.html',
      // 打包后生成的html文件名
      filename: 'index.html'
    })

  ]
}

运行打包:

npm run build

 

四、webpack小插件应用

来介绍一下webpack中的小插件。

(1) cleanWebpackPlugin

(2) copyWebpackPlugin

(3) bannerPlugin, 这个插件是webpack内置的插件

1、cleanWebpackPlugin

我们希望在生成dist目录之前,可以先把原来的dist目录给删除掉。 

安装:

npm install clean-webpack-plugin -D

在webpack.config.js中进行配置:

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  // 模式
  // 生产环境下会自动将打包后的js进行压缩
  mode: 'production',
  entry: {
    home: './src/index.js'
  },
  // 规则
  module: {
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          // 使用babel将ES6语法转换成ES5语法
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },

  output: {
    // [name] 代表的是home 或者 other
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 选择一个html文件作为模板
      template: './index.html',
      // 打包后生成的html文件名
      filename: 'index.html'
    }),
    // 传入参数,清空哪个目录
    // 也可以清空多个文件夹,比如 ['./dist', './xxx']
    // 表示先删除掉dist目录,然后再打包
    new CleanWebpackPlugin('./dist')

  ]
}

运行打包命令:

npm run build

2、copyWebpackPlugin

在根目录新建doc目录,里面新建hello.txt:

this is hello.txt

然后,我们也想把doc目录里面的东西,打包时拷贝到dist目录下。

可以使用这个插件:copyWebpackPlugin。

npm install copy-webpack-plugin -D

在webpack.config.js中进行配置:

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
let CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // 模式
  // 生产环境下会自动将打包后的js进行压缩
  mode: 'production',
  entry: {
    home: './src/index.js'
  },
  // 规则
  module: {
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          // 使用babel将ES6语法转换成ES5语法
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },

  output: {
    // [name] 代表的是home 或者 other
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 选择一个html文件作为模板
      template: './index.html',
      // 打包后生成的html文件名
      filename: 'index.html'
    }),
    // 传入参数,清空哪个目录
    // 也可以清空多个文件夹,比如 ['./dist', './xxx']
    // 表示先删除掉dist目录,然后再打包
    new CleanWebpackPlugin('./dist'),

    new CopyWebpackPlugin([
        // 打包时把doc目录里面的东西,拷贝到dist目录
        {from: 'doc', to: './'}
    ])

  ]
}

运行打包命令:

npm run build

打包结果:

webpack

 成功在打包时,把doc目录下的文件,拷贝到了dist目录中。

 

 3、bannerPlugin

bannerPlugin 是版权声明的插件。

它是webpack的内置的一个插件。

在webpack.config.js中进行配置:

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
let CopyWebpackPlugin = require('copy-webpack-plugin');
let webpack = require('webpack');

module.exports = {
  // 模式
  // 生产环境下会自动将打包后的js进行压缩
  mode: 'production',
  entry: {
    home: './src/index.js'
  },
  // 规则
  module: {
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          // 使用babel将ES6语法转换成ES5语法
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },

  output: {
    // [name] 代表的是home 或者 other
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 选择一个html文件作为模板
      template: './index.html',
      // 打包后生成的html文件名
      filename: 'index.html'
    }),
    // 传入参数,清空哪个目录
    // 也可以清空多个文件夹,比如 ['./dist', './xxx']
    // 表示先删除掉dist目录,然后再打包
    new CleanWebpackPlugin('./dist'),

    new CopyWebpackPlugin([
        // 打包时把doc目录里面的东西,拷贝到dist目录
        {from: 'doc', to: './'}
    ]),

    new webpack.BannerPlugin('copyright by xxx')

  ]
}

运行打包命令:

npm run build

打包结果:

webpack

在打包后的js文件中,会加上这句版权声明。

打包后的html文件中没有,只有js文件会加上这句话。 

 

五、webpack跨域问题

在根目录新建一个server.js:

因为webpack自带了express, 所以不需要单独安装express。

server.js:

let express = require('express');

let app = express();

app.get('/api/user', (req, res) => {
    res.json({name: 'xxx'})
});

app.listen(3000);

运行:

node server.js

浏览器访问:

http://localhost:3000/api/user

 在src/index.js 写一个ajax,去调用这个接口:

// 目前访问的是 http://localhost:8080/api/user
// 需要使用 http-proxy
// 代理到 http://localhost:3000/api/user
let xhr = new XMLHttpRequest();

// true 代表是异步
xhr.open('GET', '/api/user', true);

xhr.onload = function () {
  console.log(xhr.response);
};

xhr.send();

 运行:

npm run dev

此时默认访问的是 http://localhost:8080/api/user,会报404。

在webpack.config.js中进行配置:

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  // 模式
  // 生产环境下会自动将打包后的js进行压缩
  mode: 'production',
  entry: {
    home: './src/index.js'
  },
  // 规则
  module: {
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          // 使用babel将ES6语法转换成ES5语法
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  devServer: {
    // 代理
    proxy: {
      // 如果路径是/api开头的的话, 就去http://localhost:3000 下去找
      '/api': 'http://localhost:3000'
    }
  },
  output: {
    // [name] 代表的是home 或者 other
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 选择一个html文件作为模板
      template: './index.html',
      // 打包后生成的html文件名
      filename: 'index.html'
    }),
    // 传入参数,清空哪个目录
    // 也可以清空多个文件夹,比如 ['./dist', './xxx']
    // 表示先删除掉dist目录,然后再打包
    new CleanWebpackPlugin('./dist'),

  ]
}

再次运行:

npm run dev

浏览器打开页面:

http://localhost:8080/

 就成功调取到了 http://localhost:3000/api/user 这个接口。

2、如果server.js里是这个路径

server.js:

let express = require('express');

let app = express();

app.get('/user', (req, res) => {
    res.json({name: 'xxx123'})
});

app.listen(3000);

那么调取接口的路径,就是 http://localhost:3000/user 了。

在webpack.config.js中进行配置:

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  // 模式
  // 生产环境下会自动将打包后的js进行压缩
  mode: 'production',
  entry: {
    home: './src/index.js'
  },
  // 规则
  module: {
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          // 使用babel将ES6语法转换成ES5语法
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  devServer: {
    // 代理
    proxy: {
      // 如果路径是/api开头的的话, 就去http://localhost:3000 下去找
      '/api': {
        target: 'http://localhost:3000',
        // 把/api 给重写
        // 也就是访问 http://localhost:3000/api/user 时,
        // 把/api 重写成 '', 那么最终访问的就是 http://localhost:3000/user 了。
        pathRewrite: {
          // 就是把路径中的/api 给删除掉
          // 那么最终的路径就是 http://localhost:3000/user 了。
          '/api': ''
        }
      }
    }
  },
  output: {
    // [name] 代表的是home 或者 other
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 选择一个html文件作为模板
      template: './index.html',
      // 打包后生成的html文件名
      filename: 'index.html'
    }),
    // 传入参数,清空哪个目录
    // 也可以清空多个文件夹,比如 ['./dist', './xxx']
    // 表示先删除掉dist目录,然后再打包
    new CleanWebpackPlugin('./dist'),

  ]
}

proxy 重写,就是把 ajax请求的路径中的 /api 给删除掉,然后最终ajax请求的路径,就是 http://localhost:3000/user 了。

本来ajax请求的路径,是 http://localhost:8080/api/user。

通过proxy代理到 http://localhost:3000/api/user 这个端口,并且通过重写,把路径中的 /api 给删除掉,那么最后ajax请求的路径,就变成 http://localhost:3000/user 了。

运行:

npm run dev

成功调取到了  http://localhost:3000/user 这个接口。 

 

3、我们前端只是单纯想来模拟数据。

server.js:

let express = require('express');

let app = express();

app.get('/user', (req, res) => {
    res.json({name: 'xxx123'})
});

app.listen(3000);

src/index.js:

let xhr = new XMLHttpRequest();

// true 代表是异步
xhr.open('GET', '/user', true);

xhr.onload = function () {
  console.log(xhr.response);
};

xhr.send();

在index.js里面,发送一个ajax请求。

在webpack.config.js中进行配置:

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  // 模式
  // 生产环境下会自动将打包后的js进行压缩
  mode: 'production',
  entry: {
    home: './src/index.js'
  },
  // 规则
  module: {
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          // 使用babel将ES6语法转换成ES5语法
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  devServer: {

    // (2) 我们前端只是想单纯来模拟数据
    before(app) { // 提供的方法
      app.get('/user', (req,res) => {
        res.json({name: 'xxx-before'});
      })
    }



    // (1) 代理
    // proxy: {
    //   // 如果路径是/api开头的的话, 就去http://localhost:3000 下去找
    //   '/api': {
    //     target: 'http://localhost:3000',
    //     // 把/api 给重写
    //     // 也就是访问 http://localhost:3000/api/user 时,
    //     // 把/api 重写成 '', 那么最终访问的就是 http://localhost:3000/user 了。
    //     pathRewrite: {
    //       // 就是把路径中的/api 给删除掉
    //       // 那么最终的路径就是 http://localhost:3000/user 了。
    //       '/api': ''
    //     }
    //   }
    // }
  },
  output: {
    // [name] 代表的是home 或者 other
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 选择一个html文件作为模板
      template: './index.html',
      // 打包后生成的html文件名
      filename: 'index.html'
    }),
    // 传入参数,清空哪个目录
    // 也可以清空多个文件夹,比如 ['./dist', './xxx']
    // 表示先删除掉dist目录,然后再打包
    new CleanWebpackPlugin('./dist'),

  ]
}

运行:

npm run dev

结果:

webpack

这样,就实现了没有真实后台接口,单纯前端模拟数据了。

 

3、有真实后端服务,但是不想用代理来处理 

能不能在服务端中启动webpack,端口用服务端端口。

安装:

npm install webpack-dev-middleware -D

webpack-dev-middleware 可以在服务端,来启动我们的webpack。

在server.js:

let express = require('express');

let app = express();

// 在服务端,自己来起这个webpack。
let webpack = require('webpack');

// 使用webpack-dev-middleware这个插件,来在服务端启动webpack。
let middle = require('webpack-dev-middleware');

let config = require('./webpack.config.js');

let compiler = webpack(config);

// 中间件
// 所以,我们在启动这个3000端口的服务时,也会连带着启动 webpack。
app.use(middle(compiler));

app.get('/user', (req, res) => {
    res.json({name: 'xxx123'})
});

app.listen(3000);

src/index.js:

let xhr = new XMLHttpRequest();

// true 代表是异步
xhr.open('GET', '/user', true);

xhr.onload = function () {
  console.log(xhr.response);
};

xhr.send();

运行:

node server.js

浏览器打开:

localhost:3000/user

输出:

{"name":"xxx123"}

这种方式也能解决跨域的问题,就是把webpack也在服务端启动,那么最终index.html访问也在http://localhost:3000端口了,

打包后的index.js 中请求的ajax的路径,也是http://localhost:3000这个端口的,所以,就解决了跨域问题。

 

 

六、resolve属性的配置

webpack中有一个重要的配置,叫 resolve。

安装:

npm install css-loader style-loader -D

 再安装一下bootstrap:

npm install bootstrap --save

在src/index.js中引入bootstrap:

// import 'bootstrap/dist/css/bootstrap.css';


import 'bootstrap';

 然后在webpack.config.js中进行配置:

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  // 模式
  // 生产环境下会自动将打包后的js进行压缩
  mode: 'production',
  entry: {
    home: './src/index.js'
  },
  // 规则
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          // 使用babel将ES6语法转换成ES5语法
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  // resolve 是解析的意思
  resolve: {
    modules: [
       // 只查找当前的node_modules目录,不向上级查找
       path.resolve('node_modules')
    ],
    // 先找style, 然后再找main
    // mainFields: ['style', 'main']

    // 入口文件的名字 index.js
    // mainFiles: [],

    // 别名
    alias: {
      // 那么在js文件中只需要 import 'bootstrap' 就行了。
      bootstrap: 'bootstrap/dist/css/bootstrap.css'
    }
  },
  devServer: {

    // (2) 我们前端只是想单纯来模拟数据
    // before(app) { // 提供的方法
    //   app.get('/user', (req,res) => {
    //     res.json({name: 'xxx-before'});
    //   })
    // }



    // (1) 代理
    proxy: {
      // 如果路径是/api开头的的话, 就去http://localhost:3000 下去找
      '/api': {
        target: 'http://localhost:3000',
        // 把/api 给重写
        // 也就是访问 http://localhost:3000/api/user 时,
        // 把/api 重写成 '', 那么最终访问的就是 http://localhost:3000/user 了。
        pathRewrite: {
          // 就是把路径中的/api 给删除掉
          // 那么最终的路径就是 http://localhost:3000/user 了。
          '/api': ''
        }
      }
    }
  },
  output: {
    // [name] 代表的是home 或者 other
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 选择一个html文件作为模板
      template: './index.html',
      // 打包后生成的html文件名
      filename: 'index.html'
    }),
    // 传入参数,清空哪个目录
    // 也可以清空多个文件夹,比如 ['./dist', './xxx']
    // 表示先删除掉dist目录,然后再打包
    new CleanWebpackPlugin('./dist'),

  ]
}

 

2、还有一种需求

在src目录下新建 style.css:

body {
    background: yellow;
}

在src/index.js中本来是这样引入:

import './style.css'

 但是,我不想写后缀

import './style'

在webpack.config.js中进行配置:

// resolve 是解析的意思
  resolve: {
    modules: [
       // 只查找当前的node_modules目录,不向上级查找
       path.resolve('node_modules')
    ],
    // 先找style, 然后再找main
    // mainFields: ['style', 'main']

    // 入口文件的名字 index.js
    // mainFiles: [],

    // 别名
    alias: {
      // 那么在js文件中只需要 import 'bootstrap' 就行了。
      bootstrap: 'bootstrap/dist/css/bootstrap.css'
    },
    // 在js中引入 import './style'
    // 先去找 .js文件,然后找 .css文件, 然后找 .json 文件
    extensions: ['.js', '.css', '.json']
  },

七、定义环境变量

webpack中有一个比较常用的插件,一般开发的时候有一套环境,而上线的时候可能会有一套环境。

这个插件是webpack内置的插件,叫webpack.DefinePlugin。

在webpack.config.js中进行配置:

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
let webpack = require('webpack');

module.exports = {
  // 模式
  // 生产环境下会自动将打包后的js进行压缩
  mode: 'production',
  entry: {
    home: './src/index.js'
  },
  // 规则
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          // 使用babel将ES6语法转换成ES5语法
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  // resolve 是解析的意思
  resolve: {
    modules: [
       // 只查找当前的node_modules目录,不向上级查找
       path.resolve('node_modules')
    ],
    // 先找style, 然后再找main
    // mainFields: ['style', 'main']

    // 入口文件的名字 index.js
    // mainFiles: [],

    // 别名
    alias: {
      // 那么在js文件中只需要 import 'bootstrap' 就行了。
      bootstrap: 'bootstrap/dist/css/bootstrap.css'
    },
    // 在js中引入 import './style'
    // 先去找 .js文件,然后找 .css文件, 然后找 .json 文件
    extensions: ['.js', '.css', '.json']
  },
  devServer: {

    // (2) 我们前端只是想单纯来模拟数据
    // before(app) { // 提供的方法
    //   app.get('/user', (req,res) => {
    //     res.json({name: 'xxx-before'});
    //   })
    // }



    // (1) 代理
    proxy: {
      // 如果路径是/api开头的的话, 就去http://localhost:3000 下去找
      '/api': {
        target: 'http://localhost:3000',
        // 把/api 给重写
        // 也就是访问 http://localhost:3000/api/user 时,
        // 把/api 重写成 '', 那么最终访问的就是 http://localhost:3000/user 了。
        pathRewrite: {
          // 就是把路径中的/api 给删除掉
          // 那么最终的路径就是 http://localhost:3000/user 了。
          '/api': ''
        }
      }
    }
  },
  output: {
    // [name] 代表的是home 或者 other
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.DefinePlugin({
        // 定义一个DEV变量,在src/index.js 中可以使用 DEV变量
        // DEV: "'development'",
        // PRO: "'production'"

        // 或者 加上JSON.stringify 会变成字符串
        DEV: JSON.stringify('development'),
        PRO: JSON.stringify('production'),
        // 'true' 会变成 true,
        FLAG: 'true',
        EXPORESSION: '1+1'
    }),
    new HtmlWebpackPlugin({
      // 选择一个html文件作为模板
      template: './index.html',
      // 打包后生成的html文件名
      filename: 'index.html'
    }),
    // 传入参数,清空哪个目录
    // 也可以清空多个文件夹,比如 ['./dist', './xxx']
    // 表示先删除掉dist目录,然后再打包
    new CleanWebpackPlugin('./dist'),

  ]
}

在src/index.js中使用变量:

let url = '';
if(DEV === 'development') {
  // 如果是开发环境
  url = 'http://localhost:3000'
}else {
  url = 'http://www.xxx.com'
}
console.log(url);

console.log(typeof FLAG);   // boolean
console.log(EXPORESSION);   // 2

运行:

npm run dev

 

八、区分不同环境

将webpack.config.js  改名为  webpack.base.js 。

然后在根目录新建 webpack.dev.js 和 webpack.prod.js 两个配置文件。

我们需要一个插件: webpack-merge。

安装:

npm install webpack-merge -D

webpack.base.js:

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
let webpack = require('webpack');

module.exports = {
  entry: {
    home: './src/index.js'
  },
  // 规则
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          // 使用babel将ES6语法转换成ES5语法
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  // resolve 是解析的意思
  resolve: {
    modules: [
       // 只查找当前的node_modules目录,不向上级查找
       path.resolve('node_modules')
    ],
    // 先找style, 然后再找main
    // mainFields: ['style', 'main']

    // 入口文件的名字 index.js
    // mainFiles: [],

    // 别名
    alias: {
      // 那么在js文件中只需要 import 'bootstrap' 就行了。
      bootstrap: 'bootstrap/dist/css/bootstrap.css'
    },
    // 在js中引入 import './style'
    // 先去找 .js文件,然后找 .css文件, 然后找 .json 文件
    extensions: ['.js', '.css', '.json']
  },
  devServer: {

    // (2) 我们前端只是想单纯来模拟数据
    // before(app) { // 提供的方法
    //   app.get('/user', (req,res) => {
    //     res.json({name: 'xxx-before'});
    //   })
    // }



    // (1) 代理
    proxy: {
      // 如果路径是/api开头的的话, 就去http://localhost:3000 下去找
      '/api': {
        target: 'http://localhost:3000',
        // 把/api 给重写
        // 也就是访问 http://localhost:3000/api/user 时,
        // 把/api 重写成 '', 那么最终访问的就是 http://localhost:3000/user 了。
        pathRewrite: {
          // 就是把路径中的/api 给删除掉
          // 那么最终的路径就是 http://localhost:3000/user 了。
          '/api': ''
        }
      }
    }
  },
  output: {
    // [name] 代表的是home 或者 other
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.DefinePlugin({
        // 定义一个DEV变量,在src/index.js 中可以使用 DEV变量
        // DEV: "'development'",
        // PRO: "'production'"

        // 或者 加上JSON.stringify 会变成字符串
        DEV: JSON.stringify('development'),
        PRO: JSON.stringify('production'),
        // 'true' 会变成 true,
        FLAG: 'true',
        EXPORESSION: '1+1'
    }),
    new HtmlWebpackPlugin({
      // 选择一个html文件作为模板
      template: './index.html',
      // 打包后生成的html文件名
      filename: 'index.html'
    }),
    // 传入参数,清空哪个目录
    // 也可以清空多个文件夹,比如 ['./dist', './xxx']
    // 表示先删除掉dist目录,然后再打包
    new CleanWebpackPlugin('./dist'),

  ]
}

webpack.prod.js:

let {smart} = require('webpack-merge');
let base = require('./webpack.base.js');

// base 是基础配置, 后面的参数是自己写的配置
module.exports = smart(base, {
    // 模式
    // 生产环境下会自动将打包后的js进行压缩
    mode: 'production',
    // 生产环境下的优化项
    optimization: {
        minimizer: [

        ]
    },
    plugins: [
        
    ]
})

webpack.dev.js:

let {smart} = require('webpack-merge');
let base = require('./webpack.base.js');

// base 是基础配置, 后面的参数是自己写的配置
module.exports = smart(base, {
    // 模式
    // 开发环境
    mode: 'development',
    // 开发环境下使用的开发服务器配置
    derServer: {

    },
    devtool: 'source-map'
})

运行:

npm run build -- --config webpack.dev.js

指定运行的是 webpack.dev.js 文件。

运行:

npm run build -- --config webpack.prod.js

指定运行的是 webpack.prod.js 文件。

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值