webpack入门(1)-“图解什么是webpack”传送门

初始化和安装

• 在工作目录新建一个文件夹
• npm init 初始化一个文件夹,出现对话框按确定就行。
• npm install --global webpack 全局安装，在c盘下会生成node_modules文件夹中会包含webpack。请注意，这不是推荐的做法。全局安装会将您锁定到特定版本的webpack，并且在使用不同版本的项目中可能会失败。官方并不推荐全局安装。
• npm install --save-dev webpack 安装在本地开发环境中
• npm install --save-dev webpack-cli webpack4之后要安装cli。把cli安装到开发环境中。
• -D就是--save-dev的缩写

打包一个简单的文件

• 在文件夹下新建一个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即可在本地的8080端口查看结果。
• 搭建开发环境远不止这些内容，我只挑了我在学习过程中经常用到的地方，或者我觉得重要的地方。

写在最后

webpack很难啃，我是在网上找资料看视频，一点一点摸索。网上的资料时间维度大，有的还在讲webpack1.0,有的在讲最新版的webpack,所以在整理的时候难免有出错的地方。欢迎在下方评论指出错误！

未完待续…