本系列主要学习webpack的配置。webpack本身间接的用过很多次,可是本身配置却没多少次,因此特意写写文章,学习webpack的配置,有不恰当的地方,欢迎指正。此次配置
babel
。
若你对webpack的概念还不了解,先查看相应文档webpack中文文档html
npm init -y // 初始化项目,会添加一个package.json npm install --save-dev webpack // 下载webpack,并记录到package.json的devDependencies中
指定入口和出口。node
// webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, mode:'development' };
当前项目目录为webpack
dist // 手动新建,因出口指定为此文件夹。 |---index.html src |---index.js package-lock.json package.json webpack.config.json
所须要的依赖:babel-loader、babel-core、babel-preset-env、babel-polyfill、babel-runtime和babel-plugin-transform-runtimees6
babel-loader
:在import或加载模块时,对es6代码进行预处理,es6语法转化为es5语法。babel-core
:容许咱们去调用babel的api,能够将js代码分析成ast(抽象语法树),方便各个插件分析语法进行相应的处理.babel-preset-env
:指定规范,好比es2015,es2016,es2017,latest,env(包含前面所有)babel-polyfill
:它效仿一个完整的ES2015+环境,使得咱们可以使用新的内置对象好比 Promise,静态方法好比Array.from 或者 Object.assign, 实例方法好比 Array.prototype.includes 和生成器函数(提供给你使用 regenerator 插件)。为了达到这一点, polyfill 添加到了全局范围,就像原生类型好比 String 同样。babel-runtime babel-plugin-transform-runtime
:与babel-polyfill做用同样,使用场景不同。web
为了更简单明了,把依赖的安装分开,不一次性安装全部依赖。npm
npm install --save-dev babel-loader babel-core
在webpack.config.js中添加json
module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" // test 符合此正则规则的文件,运用 loader 去进行处理,除了exclude 中指定的内容 } ] }
npm install babel-preset-env --save-dev
新建 .babelrc
文件api
//babelrc { "presets": ["env"] }
此依赖用于开发应用,会在全局添加新的方法,会污染全变量。数组
npm install --save babel-polyfill
在入口文件本文为index.js
的顶部添加babel
import "babel-polyfill"
在webpcak.config.js中将babel-polyfill添加到entry数组中
module.exports = { entry: ['babel-polyfill', './src/index.js'], ...
最终webpack.config.js为
const path = require('path'); module.exports = { entry: ['babel-polyfill', './src/index.js'], output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, mode:'development', module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" // test 符合此正则规则的文件,运用 loader 去进行处理,除了exclude 中指定的内容 } ] } };
项目目录为
dist // 手动新建,因出口指定为此文件夹。 |---index.html src |---index.js .babelrc package-lock.json package.json webpack.config.json
到目前位置,用于开发应用
的babel环境已经配置好了。
执行
npx webpack --config webpack.config.js
即可在dist中看到打包出来的bundle.js文件
若是你不是开发应用,而是开发提供给第三方利用的框架
的话,将第3步的polyfill改成这两个依赖。它们在局部添加新方法,不污染全局变量
npm install --save-dev babel-runtime babel-plugin-transform-runtime
.babelrc文件
{ "presets": ["env"], "plugins": ["transform-runtime"] }
用于开发框架的babel环境已经配置好,
一样执行
npx webpack --config webpack.config.js
即可在dist中看到打包出来的bundle.js文件