webpack的安装以及简单实用

一、webpack是什么？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

二、webpack和gulp的区别？

1、其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp类的工具。

2、Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

三、webpack安装

使用npm 安装，新建一个空的文件夹（webpack sample project），终端转到该文件夹目录下，执行以下命令。

命令行：npm -v 查看版本号

安装npm：npm install  –save mocha

全局安装webpack ：npm insatll webpack -g

出现以下问题解决方案：

1、

终端输入：sudo npm install webpack -g

2、

解释：npm 版本问题导致，需要更新npm的版本或者回退版本

终端：

npm install npm -g  //更新npm版本

npm – v // 查看版本号

在去安装webpack就不出现这个问题了。

查看版本号：webpack -h

四、webpack的使用

1、在创建的文件夹中创建一个package.json 文件。

出现问题：

原因：

原因是npm install -g webpack默认是全局安装的webpack最新版，目前是4.0.1，这个版本中webpack命令行工具被单独分离到了webpack-cli中，因此需要额外安装webpack-cli才能使用webpack命令，不过坑也很多。

为了和该视频配套，建议安装1.1.3版本，即使用npm install -g webpack@1.1.3就可以了。

2、终端中使用webpack（使用时有可能会出错、建议使用第二种方式使用）

# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，

# {destination for bundled file}处填写打包文件的存放路径

# 填写路径的时候不用添加{}

           webpack {entry file} {destination  for bundled file}

# webpack 非全局安装的情况

          node_modules/.bin/webpack app/main.js public/bundle.js

3、通过配置文件使用webpack

3.1新建webpack.config.js文件，写入简单的配置文件代码。

module.exports = {
    entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    }
}
在终端中输入：webpack 若非全局node_modules/.bin/webpack
这条命令会自动引用webpack.config.js文件中的配置选项 

3.2对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令 在package.json中对script对象进行设置即可。
{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack"//修改在这里 json不支持注释 使用时请删除
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "3.10.0"
  }
}
Ps：
package.json中的会安装一定顺序寻找命令对应位置 本地的node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack， 你都不需要写前面那指明详细的路径了。