0402.webpack配置文件使用

0402.webpack配置文件使用

04_02.webpack配置文件使用

1. 要操作的内容展示：2. 首先用模块化的思想将需要使用的js模块暴露出来。（参考04_01.webpack打包初体验）3. 然后用main.js将需要使用的js引入进来（参考04_01.webpack打包初体验）4. 以上做完以后，在全局安装一次webpack

npm i webpack -g

然后在要做操作的对应根目录下执行一次下面的代码：

npm i webpack -D

5. 在根目录创建一个webpack.config.js

/* * @Author: Robyn  * @Date: 2017-11-16 17:53:11  * @Last Modified by:   Robyn  * @Last Modified time: 2017-11-16 17:53:11  */// 这个配置文件里面使用node的方式来编写// 该配置文件必须向外暴漏一个配置对象, 供将来的webpack工具调用const path = require('path');module.exports = {    // 入口    entry: path.resolve(__dirname, './src/main.js'),    // 输出    // webpack在打包文件的时候, 提供了一些变量, 有一个chunkhash变量    // 它是值是根据打包后的文件内容计算出来的, 为了解决用户缓存的问题,     // 我们一般会把这个变量的值拼接到我们的文件中    output: {        path: path.resolve(__dirname, 'dist'), // 输出路径,一般起名为dist目录        filename: 'bundle_[chunkhash:8].js'      // 打包后的文件名, 一般起名为bundle.js,[chunkhash:8]的作用是给文件添加唯一的标识符，预防浏览器缓存    } };

6.在根目录执行以下命令：

webpack

7. 然后在index.html手动引入bundle.js文件图片.png7. 查看效果

Webpack配置环境变量 - 避免踩坑

作者：蛙人 来源：前端娱乐圈
前言
今天来讲一下Webpack配置环境变量，那么环境变量是干啥的。我们在开发项目中都会遇到这种场景，区分「开发环境」、「生产环境」、「测试环境」，不同场景请求不同的接口Api。这时候项目中配置的「环境变量」就登场啦~，下面来讲一下配置环境变量的方式吧。
配置方法
Set or Export
该方式有个棘手的问题就是windows和mac使用的方式还不同，不同系统使用启动项目还得更改代码，这就有点难受，我们来看一下。
「package.json」
windows系统如下配置

{   "scripts": {     "dev": "set NODE_ENV=dev && node index.js"   } } 

mac系统如下配置

{   "scripts": {     "dev": "export NODE_ENV=dev && node index.js"   } }

「效果」
webpack.config.js文件

console.log(process.env.NODE_ENV)//dev

该配置方式如果用windows方式配置，用mac电脑启动这样就会有问题，我们还得手动更改，这样非常的繁琐。
Cross-env
该插件就是解决上面我们所说的问题(不同系统使用不同的配置方式)，该插件称为 "跨平台环境变量"，就是一套代码兼容两端。下面我们来案例
「安装」

npmicross-env-D

在项目下package.json中配置

{   "scripts": {     "dev:serve": "set NODE_ENV=baidu.com && npx webpack-dev-server --config=./config/webpack.config.js",   } } 

「webpack.config.js」

console.log(process.env.NODE_ENV)//baidu.com

但是上面这样还有个问题是，虽然我们环境变量配置好了，但是只能在webpack.config.js里面使用。我们来到main.js文件下打印看看呢。
「main.js」

console.log(process.env.NODE_ENV)//undefined

上面main.js可以清楚地看到，打印结果为undefined，这是为什么呢，是因为「当前的环境变量」，只是在node环境中生效，在浏览器中并没有，所以main.js里面获取到的是undefined。
「有坑 - 误区」
「webpack.config.js」

console.log(process.env.NODE_ENV) // baidu.com module.exports = {  mode: "development" } 

「main.js」

console.log(process.env.NODE_ENV)//development

咦，这次怎么main.js里面环境变量又变成development了，这是因为浏览器环境中NODE_ENV走的是webpack里的mode。
webpack-dev-server 默认就是 --mode=developmentwebpack 默认就是 --mode=production?注意这里的坑，避免出错。?
回归主题，那么既然cross-env环境变量只能在node环境下使用，那怎么在浏览器环境下使用呢。配合Webpack提供的内置插件全局变量，我们来配置一下。
「webpack.config.js」

console.log(process.env.NODE_ENV) // baidu.com const webpack = require("webpack") module.exports = {  mode: "development",     plugins: [         new webpack.DefinePlugin({             "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)         })     ] } 

「main.js」

console.log(process.env.NODE_ENV)//baidu.com

这时再看，cross-env全局变量已经覆盖掉mode的啦，上面JSON.stringify是防止解析成为一个变量。现在可以在全局项目中随意使用环境变量啦~。