webpack搭建ES6环境

xiaoxiao2021-02-28  63

ES6环境搭建

参考链接

环境需求: 1. Node 2. cnpm (国内可以选择cnpm,淘宝镜像) 3. webpack 4. babel-loader (转码器)

创建工程目录的结构如下:

目录结构说明: study-es6: 项目名 dist/js:存放打包后的文件; src:开发环境访问的目录; src/main.js:我们编写的es6代码; index.html:访问的页面(根目录下) webpack.config.js:webpack配置文件;

1. cnpm install 2. cnpm install webpack --save-dev ( 安装webpack ) 3. cnpm install babel-loader babel-core babel-preset-es2015 webpack --save-dev ( 安装转码器 )

官方 babel-loader 说明

配置文件

webpack.config.js配置:

// webpack2 需要引入path 使用绝对路径 const path = require('path') module.exports = { // 入口文件 entry: './src/main.js', // 输出文件 output: { // 输出的文件名字 filename: 'bulid.js', // 输出的文件地址 path对应一个绝对路径,此路径是你希望一次性打包的目录。 path: __dirname+'/src/dist/' }, //模块 module:{ // 加载器 rules:[ { test:/\.js$/, //匹配.js文件 //排除也就是不转换node_modules下面的.js文件 exclude: /(node_modules|bower_components)/, //加载器 webpack2需要loader写完整 不能写babel 要写 bable-loader use:[{loader:"babel-loader"}] } ] } }

未加注释:

const path = require('path') module.exports = { entry: './es6-01/src/main.js', output: { filename: 'bulid.js', path: __dirname+'/es6-01/dist/' }, module:{ rules:[ { test:/\.js$/, exclude: /(node_modules|bower_components)/, use:[{loader:"babel-loader"}] } ] } }

package.json文件配置:

这是主要就是命令;使用起来方便: dev代表你可以在命令行输入: cnpm run dev (后面的–colors是彩色打印,,请问一下其他的选项参数官网怎么找,我找了半天。。。)

你的babel-laoder也要写入package.json文件中:

然后就运行吧

转载请注明原文地址: https://www.6miu.com/read-64313.html

最新回复(0)