webpack入门(2) - 安装，配置，环境搭建

• 在文件夹下新建一个 src 文件,下面新建一个 main.js 文件。
• 根目录下新建一个 webpack.config.js 文件。为什么要建这个文件，因为直接使用 webpack ，它会寻找 webpack.config.js 把它当成默认的配置去运行。此时它不需要指定任何参数，就能读取里面的内容。

// webpack.config.js
module.exports = {
    entry: __dirname + '/src/main.js',//我指定了入口文件，在src/main.js
    output: { 
        path: __dirname + '/dist', //打包后指定存放的目录,放在dist
        filename: 'bundle.js' //打包后的文件叫bundle.js
    }
}
复制代码

__dirname是Node.js中一个全局变量，它指向当前执行脚本所在的目录。

有多个入口文件的时候：

• 如果你一开始你就不想运行默认的 webpack.config.js ,你想运行其他的配置文件,比如 config.js 文件。你可以运行 webpack --config config.js ,这样它就会寻找 config.js ，并且运行它。
• 运行 webpack ，它会自动的寻找 webpack.config.js ，找到其中的入口文件比如上面的 main.js 。
• 如果你想有些个性化的需求，你想看到打包的进度，打包的模块，模块的信息，打包的原因。你可以输入以下的命令。

  webpack --progress
  webpack --progress --display-modules
  webpack ---progress --display-modules --display-reasons
  

• 但是这种方法太过繁琐，你要在命令行输入这么多东西。那么有没有更轻松的方法呢？ 有的！
  • 在你初始化的时候，系统会自动生成 package.json 。现在找到根目录下的 package.json 文件。

    

  • 在里面的 scripts 下添加定义一个脚本，

  "dev":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
  复制代码

  • 最后在命令行运行 npm run dev 因为scripts脚本提供了命令的“别名”，像上面的以一个“dev”命令代替了一连串的命令，使用起来更为方便 ,即便你没有在命令行输入以上的配置，你依然可以看到打包的进度；以看到打包有几个模块，模块的信息；字体为彩色；打包的原因。因为你在配置文件下定义了，就不需要了。

更快捷的执行打包任务

• 最原始的执行打包任务，可以使用命令 webpack main.js bundle.js 在这个例子当中， main.js 是入口文件， bundle.js 打包完之后的文件。
• 第二种，我们可以在 webpack.config.js 里写配置。

module.exports = {
  entry:  __dirname + "/app/main.js",//唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}
复制代码

我们只需要输入 webpack 命令，webpack就能自己找到 webpack.config.js ，在找出入口，找到output,执行打包。

• 第三种，继承第二种。更简单快捷的执行打包。在 package.json 里找到“scripts”脚本，添加

"start": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
复制代码

然后我们只需要 npm start 就可以打包了。

需要注意的是,“start”在npm中比较特殊，只需npm start 就可以执行命令。如果是非start,还要再在前面加上一个run ,比如npm run dev,npm run build

搭建开发环境

使用source maps进行调试调试

为何要使用source maps？

因为 webpack 对源代码进行打包后，会对源代码进行压缩、精简、甚至变量名替换，在浏览器中，无法对代码逐行打断点进行调试，所有需要使用 source maps 进行调试，它使得我们在浏览器中可以看到源代码，进而逐行打断点调试。

如何使用source maps？

在配置中添加 devtool 属性，赋值为 source-map 或者 inline-source-map 即可，后者报错信息更加具体，会指示源代码中的具体错误位置，而 source-map 选项无法指示到源代码中的具体位置。

使用开发工具

用开发 工具 可以简化开发过程的工作。比如你写完代码后保存开发工具可以自动帮你执行一系列的命令。

watch模式

在使用 webpack-cli 进行打包时，通过命令 webpack --watch 即可开启 watch 模式，进入 watch 模式之后，一旦依赖树中的某一个模块发生了变化， webpack 就会重新进行编译。

使用webpack-dev-server

浏览器监听你的代码的修改，并自动刷新显示修改后的结果。它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖。

npm install --save-dev webpack-dev-server
devServer

// webpack.config.js
  module.exports = {
      devServer: {
          contentBase: './dist',//本地服务器所加载的页面所在目录
          historyApiFallback: true,//不跳转
          inline: true //实时刷新
      }
  };
复制代码

• 在 package.json 添加脚本

// package.json
  {
      "scripts": {
          "start": "webpack-dev-server --open"
      }
  }
复制代码

npm run start