学习webpack创建vue项目2 babel-loader
安装babel-loader
, @babel/core
, @babel/preset-env
npm install --save-dev babel-loader @babel/core @babel/preset-env
配置webpack.config.json
,加入babel-loader
webpack.config.json
:
const path = require('path'); const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { mode: 'development', entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ // ... 其它规则 { test: /\.vue$/, loader: 'vue-loader' }, // 它会应用到普通的 `.css` 文件 // 以及 `.vue` 文件中的 `<style>` 块 { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] }, { test: /\.js$/, loader: 'babel-loader' } ] }, plugins: [ // 请确保引入这个插件! new VueLoaderPlugin() ], resolve:{ extensions:['.vue','.js'], alias:{ 'vue$': 'vue/dist/vue.esm.js' } } }
根目录下创建.babelrc
文件,添加内容:
{ "presets":[ [ "@babel/preset-env" ] ] }
src/index.js
文件
const add = (a, b) => { return a + b; } console.log(add(10, 20))
运行npm run start
箭头函数转换后如下:
eval("var add = function add(a, b) {\n return a + b;\n};\n\nconsole.log(add(10, 20));\n\n//# sourceURL=webpack:///./src/index.js?");
相关推荐
gloria0 2020-10-26
gloria0 2020-08-09
hline 2020-07-29
不知道该写啥QAQ 2020-07-18
不知道该写啥QAQ 2020-11-12
webfullStack 2020-11-09
Yvettre 2020-09-15
想做大牛的蜗牛 2020-10-30
gaojie0 2020-09-11
SelinaChan 2020-08-14
不知道该写啥QAQ 2020-08-09
不知道该写啥QAQ 2020-08-02
SelinaChan 2020-07-28
wangdianyong 2020-07-23
webpackvuees 2020-07-23
yqoxygen 2020-07-20
waterv 2020-07-18
81463166 2020-07-17