webpack 搭建es6开发环境

最新推荐文章于 2024-04-11 12:45:00 发布

DenggLin

最新推荐文章于 2024-04-11 12:45:00 发布

阅读量791

点赞数

分类专栏： web进阶

本文链接：https://blog.csdn.net/qq_34117170/article/details/86623159

版权

web进阶专栏收录该内容

13 篇文章 0 订阅

订阅专栏

众所周知虽然es6写起来比较简洁（最主要是酷），但由于兼容性导致我们随意使用，所幸babel能帮我们把es6转换为es5，让我们不必再为兼容性而苦恼，下面我就简单讲解下怎么用webpack搭建es6开发环境。
第一步：
创建文件夹，如下：

新建文件

第二步
打开cmd 切换到目录下

cd/es6webpackpro

然后运行下方命令初始化项目,成功运行之后会发现项目目录下增加了package.json

npm init

一直按enter

第三步：
新建文件夹src，并在src文件夹下新建index.js,并写入内容

[1,2,3].map((item)=>console.log(item))

第四步新建
index.html 在es6webpackpro目录下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>es6webpack</title>
</head>
<body>
<div id="content">test</div>
<script src="./build/bundle.js"></script>
</body>
</html>

第五步：
新建webpack.config.js,写入一下内容

let path = require('path');
let webpack = require('webpack');
module.exports = {
    entry: './src/index.js',
    mode:"development",
    output: {
        path: __dirname,
        filename: './build/bundle.js'
    },
  
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /(node_modules)/,
            use:{
                loader:"babel-loader",
                options:{
                    presets:[
                        "env"
                    ]
                }
            },
        }]
    },
    devServer: {
        disableHostCheck: true,
        inline: true,
        port: 8181
    },
}

第六步：
打开package.json修改

  "scripts": {
    "start": "webpack-dev-server --hot --inline",
    "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack --config webpack.config.js --colors  --display-reasons --watch"
  },

第七步：
安装相应依赖

npm i webpack -s -d
npm i webpack-cli -s -d
npm i babel-loader -s -d
npm i @babel/core -s -d
npm i babel-preset-env -s -d
npm i webpack-dev-server -s -d

第八步：
运行命令

npm start

项目最终目录

在这里插入图片描述

运行结果：

在这里插入图片描述

DenggLin

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webpack 搭建es6开发环境

众所周知虽然es6写起来比较简洁（最主要是酷），但由于兼容性导致我们随意使用，所幸babel能帮我们把es6转换为es5，让我们不必再为兼容性而苦恼，下面我就简单讲解下怎么用webpack搭建es6开发环境。第一步：创建文件夹，如下：第二步打开cmd 切换到目录下cd/es6webpackpro 然后运行下方命令初始化项目,成功运行之后会发现项目目录下增加了package.jso...
复制链接

扫一扫

专栏目录