一、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, 你都不需要写前面那指明详细的路径了。