Webpack搭建ES6开发环境(部分摘自网络)

简介: Webpack搭建ES6开发环境(部分摘自网络)

首先要有node环境,进入Node.js的官网,选择对应系统下载安装包。安装node后集成了npm管理器

image.png

image.png

image.png

image.png

image.png

创建项目文件夹,以myapp文件为例,该文件即为项目根目录。打开命令提示符,执行:

image.png

依次完成以下操作:

第一步 安装模块

创建package.json文件

image.png

安装webpack工具

image.png

安装babel相关

image.png

安装css加载器

image.png

安装HTML插件

image.png

image.png

第二步 创建目录结构

项目的目录结构为:

image.png

在public目录下,创建index.html,该文件为项目的默认首页

image.png

在src目录下,创建index.js,该文件为项目的入口文件,在此文件中可以编写ES6代码

image.png

在项目的根目录下创建webpack.config.js配置文件,依次完成以下配置:

(1)配置入口(entry)

image.png

(2)配置出口(output)

image.png

(3)配置加载器(loader)

module.exports = {
  // ...
  module:{
    rules:[
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test: /\.js?$/, // jsx/js文件的正则
        exclude: /node_modules/, // 排除 node_modules 文件夹
        use:{
                    // loader 是 babel
                    loader: 'babel-loader',
                    options: {
                        // babel 转义的配置选项
                        babelrc: false,
                        presets: [
                            [require.resolve('@babel/preset-env'), {modules: false}]
                        ],
                        cacheDirectory: true
                    }
                }
      }
    ]
  }
}


(4)配置插件(plugin)

image.png

执行打包命令

image.png

配置npm run build命令执行打包操作:

image.png

执行打包命令:

image.png

第三步 搭建本地服务

安装依赖

image.png

在webpack.config.js文件中配置本地服务相关信息

image.png

在package.json文件中配置启动命令

image.png

执行启动服务命令

image.png

目录
打赏
0
0
0
0
52
分享
相关文章
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
81 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)-3
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)
123 0
Webpack 配置开发环境与正式环境
Webpack 配置开发环境与正式环境
105 0
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
129 0
vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)...
vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)...
Node.JS学习 | Babel | webpack | ES6
Node.JS学习 | Babel | webpack | ES6
98 0
webpack开发环境
webpack开发环境
72 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等