前端的坑

在es5时代，当我们引用多个js文件的时候，我们无法从a.js访问到b.js定义的变量，以及方法。

除非变量是全局的！

如此一来，非常容易导致全局变量污染问题。

Webpack便可以解决这个问题，它能将很多文件直接打包成一个，如此一来就能实现引用b.js的变量。

安装

首先，要保证你已经安装好node。

1. npm init
2. npm i webpack -g           全局安装
3. npm i webpack --save       局部安装

基础使用

打包js文件

单个js

在当前目录创建一个hello.js，然后在命令行输入 ：

webpack  hello.js  打包后的文件名

多个js

假设当前目录有hello.js、world.js，在hello.js里面引用world.js

require('./world.js') 然后命令行打包hello.js。

配置webpack

项目文件如此多，如果每次都像上面那样一行一行敲代码，效率实在太慢了。

我们可以创建一个webpack.config.js文件配置好webpack，然后一行命令解决。

entry && output

entry —— 指明打包入口文件

output —— 定义打包后的设置
           path —— 打包后文件存放路径
           filename : '打包后的文件名'

然后直接命令行运行webpack

如果这个文件的名字改为webpack.dev.config.js，

运行的时候，在命令行输入webpack –config webpck.dev.config.js

详解entry

entry可以是个字符串、数组、对象。

 字符串时： 定义入口文件
   数组时： 定义多个入口文件，并且它们会变成相互依赖的关系
   对象时： 多页面时使用
    如 entry: {
          page1: “./page1”,
          page2: “./entry1”
      }

详解output

当我们的entry是对象，也就是说多个入口文件的情况下。

filename如果是一个绝对的名称，它们依然会打包成一个文件。

如果我们想生成对应的两个文件，我们应该在filename里面使用以下参数:

[name] —— 对应的entry的名称，例如page1
[hash] —— 每次打包都有一个hash值
[chunkhash] 可以理解为版本号，没有改变的文件的值不变。

如： filename: '[name]-[hash].js'

output里面还有一个属性——publicPath

它的作用是当我们项目上线，我们可以设置所有打包的js文件引用地址，以它的值为前缀。

实例：

entry: './src/app.js',
output:{
    // path.resolve(from, to) 用于将相对路径转为绝对路径。
    path:path.resolve(__dirname,'./dist'),
    filename:'js/[name].bundle.js'
},