二、webpack4.0配置篇

最新推荐文章于 2021-01-15 23:01:16 发布
最新推荐文章于 2021-01-15 23:01:16 发布
阅读量389 收藏 3
点赞数 2
CC 4.0 BY-SA版权
分类专栏： WEBPACK4 文章标签： webpack4.0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_25354709/article/details/87728293
本文详细介绍了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 文件。

 

 

一、webpack4.0基础篇
qq_25354709的专栏
02-14 475
一、webpack基础配置 1、webpack安装 一般会安装本地的webpack，我们要安装两个：webpack 和 webpack-cli。 在webpack4.0中，我们就需要安装webpack和webpack-cli。 // 先初始化 npm init -y // -D表示开发依赖， 上线的时候不需要 npm install webpack webpack-cli -D 安装...
一、webpack4.0基础篇2
qq_25354709的专栏
02-18 631
注意：接上一篇文章《一、webpack4.0基础篇》   六、转化es6语法 本节来看一下，怎么在webpack中处理js模块。 我们需要把ES6转换成ES5语法。 安装： npm install babel-loader @babel/core @babel/preset-env -D @babel/preset-env就是用来把ES6转换成ES5语法的。   src/inde...
webpack4.0配置
01-08
webpack4.0基本配置模版，可以根据实际情况升级自己的webpack
手写一个webpack4.0配置
weixin_34194317的博客
07-12 235
确认过眼神，你还是没有准备秋招的人？时间仓促。自京东6月8号开启管培生的招聘，就意味着秋招的开始。然而你还在等着秋天的到来？今年形势应该更为严峻，随着各大技术(vue,webpack，react，微信小程序)生态越来越成熟，这也意味着我们要更加深入的去了解他们，掌握他们。比如你写vue项目，知道vue-cli。写的项目也无以伦比，但是你是否又会去了解下vue-cli到底发生了什么？或许这就是面试官...
webpack4.0基本配置，超简单！
diaopa4156的博客
03-05 258
最近复习了一下webpack，使用的是4.0版本。 下图是基本目录结构，最后留有代码地址，有兴趣可以去看看。 直接上代码（依赖未完全使用）： 项目的所有依赖都可以安装，每个都有详细的注释。】 const path = require('path'); const uglify = require('uglifyjs-webpack-plugin'); //j...
webpack4.0配置记录（1）
weixin_34226182的博客
02-01 177
趁着假期闲暇，练习下webpack4.0的一些配置。 webpack4优化压缩js和css方式 let UglifyJsPlugin = require("uglifyjs-webpack-plugin"); let OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpac...
Webpack4.0 打包工具基本操作教程 小白篇
Zeus
04-24 610
前言 我们在开发项目时，会用到很多的静态资源，我们在浏览器，浏览网页时，网页加载的速度就会变慢，而且有很多的文件都是相互依赖的。 总结 网页加载速度慢， 因为 我们要发起很多的二次请求 要处理错综复杂的依赖关系 如何解决 合并、压缩、精灵图、图片的Base64编码 requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系 webpack是什么呢 webpack 是前端的一个项目...
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
10-16
本篇文章将详细介绍如何利用 Webpack 4.0 和 Vue 2.0 结合批处理技术来创建这两种类型的前端应用。 首先，Webpack 4.0 是一个模块打包器，它能够将各种类型的模块（如 JavaScript、CSS、图片等）转换为浏览器可理解...
webpack4.0 配置说明
github_37360787的博客
07-26 754
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle。 webpack原理图解： Webpack的工作方式是：把你的项目当做一个整体，通过一个给...
webpack4.0基本配置(学习笔记)
rookie_lee1210的博客
08-14 450
基础配置 依赖安装 npm install webpack webpack-cli --save-dev npm install webpack-dev-server --save-dev webpack.config.js中的mode选项一定要配置，不能配置"",如果不配置那就不要写mode这个选项 entry 配置入口，output配置出口 output.filename下支持指定输出文件名，文件名的规则可随心所欲的拼接 模版 描述 [hash] 模块标识符(module id
1、webpack4.0 基础配置
YmwWow的博客
05-12 273
1.webpack环境的搭建 npm install webpack webpack -D //开发环境受用 我使用的代码编辑工具是VScode，安装coderunner插件很方便 2.webpack的默认打包 (1).简历项目文件夹 (2).项目目录结构 |-src ----index.js |-index.html (3).初始...
webpack的配置
Primise7的博客
06-25 311
1.npm install -g webpack 2.配置webpack.config.js文件，文件的配置类似于gulp 3.通过配置文件中的entry获取到文件，output将文件输出 4.webpack通过loader（加载器）和plugin（插件）处理文件 eslint做js的文件检测 webpack的项目打包 webpack主要是以模块化的方式打包整个...
入门 Webpack，看这篇就够了
weixin_33813128的博客
08-05 1079
2018年8月25日更新，目前 webpack 已经更新值 4.17.1 ，本文所用到的各种库或多或少有些过时，跟着代码操作下来可能会遇到各种问题，不过 webpack 的主体思想没变，所以还是希望本文对新学 webpack 的你，有所帮助。此外用基于 webpack 4.17.1 写了一个简单的demo，如果遇到啥问题，可以参考，之后应...
webpack配置
Hiroshi's
01-15 316
配置webpack build命令 配置好了这个命令以后打包项目就可以使用： npm run build 这个命令去让webpack打包，并且输出到dist(下图配置了output就是打包结果输出到当前目录下的dist文件夹里，输出结果的名字叫bundle.js) 上面的代码有问题，还是要用\转义一下.这个符号 配置webpack处理图片，这里为了简单，只处理gif,jpg,jpeg,png,svg这些类型的图片，use对应的数组里面不是字符串，而是对象，因为对象里面可以用options进行更细分的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值