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.js3、通过配置文件使用webpack3.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，你都不需要写前面那指明详细的路径了。

热门工具换一换