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

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,因此在整理的时候不免有出错的地方。欢迎在下方评论指出错误！

未完待续...

欢迎访问个人博客，会分享一些技术文章，一块儿学习前端。