浏览器目前对于es6的支持有限。我们通常会使用babel转码器经es6转为es5实现浏览器的支持。但是babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。而且像import和export这两个命令现在在任何浏览器中都是不支持的, 同时babel也无法将其转换为浏览器支持的ES5, 原因在于:babel只是个翻译,假设a.js 里 import 了 b.js, 对a.js进行转码,只是翻译了a.js,并不会把b.js的内容给读取合并进来, 如果想在最终的某一个js里,包含 a.js,b.js 的代码,那就需要用到打包工具
一、 node.js的安装,请参考点击打开链接。记住一定要配置环境变量。否则后面会引起很多问题。
二、下列的安装教程基于node 的4.4.1版本。因为node的不同版本会有差异。(之前按照网上的教程安装和使用webpack,总是在命令行出现webpack不是可执行的程序,搞了两天,才发现,原来时node的版本问题。 1.
1。全局安装webpack 。命令行输入npm install webpack -g
2.全局安装webpack。 命令行输入npm install webpack-cli -g
ps:全局安装是为了在命令行中直接使用webpack。
3.新建项目文件夹test。
4.命令行定位到项目文件夹,命令行输入npm init。初始化npm包,生成package.json
5.本地安装webpack。命令行输入npm install webpack -D
PS:-D是 --sav-dev的简写
--save:将保存配置信息至package.json(package.json是nodejs项目配置文件);
-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;
一般保存在dependencies的像这些express/ejs/body-parser等等。
6.本地安装webpack-cli。命令行输入npm install webpack -D
ps:本地安装后可以直接在本地使用webpack。只是需要输入项目下的node_module/.bin/webpack.
7.事实上webpack4.x
以'./src/index.js'
作为入口,因此我们需要创建src文件件,以及index.js的文件,以及其他的 js文件。
8.webpack4.x的打包已经不能用webpack 文件a 文件b
的方式,而是直接运行webpack --mode development
或者webpack --mode production
,这样便会默认进行打包,入口文件是'./src/index.js'
,输出路径是'./dist/main.js'
,其中src目录即index.js文件需要手动创建,而dist目录及main.js会自动生成。
9.简化输入:我们在package.json
中scripts
中加入两个成员:
"dev":"webpack --mode development",
"build":"webpack --mode production"
以后我们只需要在命令行执行npm run dev
便相当于执行webpack --mode development
,执行npm run build
便相当于执行webpack --mode production
。 可以看到根目录下生成了dist目录,并且dist目录下生成了main.js文件,main.js文件已经打包了src目录下index.js文件的代码。