webpack中配置babel10bet:

来源:http://www.chinese-glasses.com 作者:Web前端 人气:71 发布时间:2020-03-24
摘要:时间: 2019-11-05阅读: 87标签: babel为什么要配置babel? 我们实现功能丰富的应用,拥有复杂的js代码和一大堆依赖包,模块化,less等css预处理。 因为在webpack中,默认只能处理一部分es6的语

时间: 2019-11-05阅读: 87标签: babel为什么要配置babel?

我们实现功能丰富的应用,拥有复杂的js代码和一大堆依赖包,模块化,less等css预处理。

因为在webpack中,默认只能处理一部分es6的语法,一些更高级的es6和es7语法webpack不能处理,这时就需要第三方的loader即babel来帮助webpack来处理这些高级的语法

这些改进确实大大提供了我们开发效率,但是利用他们的开发的文件我们需要额外的处理才能让浏览器识别,手动处理非常复杂,这就为webpack类的工具提供了需求;

配置步骤1、先通过两套命令来安装loader:

1、什么是webpack?

webpack可以看做模块打包机,它做的事情是分析你的项目结构,找到js模块和预设的css,打包为合适的格式以供浏览器使用;

webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(main.js),

webpack将冲这个文件中找到这个项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器能识别的JavaScript文件;

npm i babel-core babel-loader babel-plugin-transform-runtime -Dnpm i babel-preset-env babel-preset-stage-0 -D

2、开始使用webpack

2、在webpack.config.js配置文件中的modules节点中添加一个规则

安装:

npm install webpack -g

npm install webpack --save-dev //安装到你的项目中

module:{ rules:[ {test:/.js$/,use:'babel-loader',exclude:/node_modules/} ] } 

更快捷的执行打包任务:

对其配置可以使用简单的npm start命令来代替,在package.json中对npm的脚本进行

设置如下:

{

“name”:“”,

“scripts”:{

“start”:“webpack”相当于npm start命令执行npm webpack命令

}

}

在package.json中的脚本部分已经默认在命前面添加了node_modules/.bin路径,

所以无论全局是否安装webpack,在终端都不需要在前面添加详细的路径;

npm的start是一个特殊的脚本名称,在命令行中可以直接使用npm start;

如果你在scripts中配置的不是start,想要在命令行中执行,需要用npm run {scripts name}

比如你配置的是build,需执行命令  npm run bulid;

3、在根目录下创建.babelrc配置文件

3、webpack的强大功能

生成 source maps(便于调试)

打包后的文件我们是不容易找到出错地方的,使用source maps帮我们解决此问题;

通过配置,webpack在打包的时候可以为我们生成 source maps,为我们提供一个

对应编译文件和源文件的方法,使编译后的代码可读性高,便于调试;

在webpack的配置文件中配置source maps,需要配置devtool,他有四中不同的配置选项;如下:

在学习阶段以及小到中性的项目上,eval-source-map使用还是比较好的,

但是只能在开发阶段使用它,配置如下

devtool: "eval-source-map"

作用:用来打包编译node_10bet,modules中所有第三方js文件,否则会非常消耗cpu,打包速度慢,项目会无法运行

4、使用webpack构建本地服务器:

浏览器检测代码修改,浏览器时时刷新,webpack提供了一个可选的本地开发服务器;

这个本地服务器基于nodejs构建, 它是一个单独的组件,

在webpack中进行配置之前需要单独安装它作为项目的依赖;

npm install webpack-dev-server --save-dev

webpack 中devserver配置选项

contentBase:默认webpack-dev-server依赖包为为根文件提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应其在这里设置(设置到public目录下);

port:设置默认监听端口,如果省略,默认是8080

inline:设置为true,当源文件修改时会自动刷新页面;

colors:设置为true,使终端输出的文件为彩色的;

historyApiFallback :在开发单页面应用非常有用,它依赖于html5 history api,设置未true,所有的跳转将指向index.html;

devServer: {

contentBase: './public',//温蒂服务器所加载页面的目录;

colors: true,//终端输入结果为彩色

inline: true//实时刷新

}

本文由10bet发布于Web前端,转载请注明出处:webpack中配置babel10bet:

关键词:

最火资讯