使用webpack 进行ES6开发

yvonne 发布于2019-08-19 17:37 / 1153人阅读

摘要：年前摸索着写了一个使用进行开发，今天再摸索着学习一下吧。。一些题外话使用的初衷其实是想用。这里使用了一个叫的加载器，在使用进行开发里面有介绍过，我们都是使用对风格的代码进行转换，所以在里面同样使用了转码规则。

年前摸索着写了一个使用gulp 进行ES6开发，今天再摸索着学习一下webpack吧。。

一些题外话

使用 webpack 的初衷其实是想用 React。
学习 React 的时候，始终被一个问题困扰：既然组件已经模块化了，比如一个 jsx 文件对应一个组件，这个文件里包含了这个组件的 html 和 js，但是他的样式该写在哪里呢？看的网上教程都是写在 jsx 文件里，通过变量定义，或者直接就写到全局样式里面去了。通过变量写不能定义伪元素，而且在 js 里这样写一堆样式感觉很难受，但是写在全局又不符合组件化的思想。
查资料的时候发现了一个 css modules 的概念，详细可以参考这篇文章。当然css没有原生支持这种概念，但在 webpack 里，通过一个 css-loader 就能轻易使用。另外 webpack+React 也很流行的，于是我就开始学习 webpack 了。

开始 一、创建目录

简单创建目录结构如下：

/es6
-- main.js
-- Person.js
index.html
webpack.config.js

es6 里面存放的是 ES6 风格的代码，main.js 是入口文件， index.html 是首页， webpack.config.js 是 webpack 的配置文件。

二、安装 webpack

首先还是要保证安装了 nodejs，然后通过 npm 安装即可：

npm install webpack -g

三、配置

打开 webpack.config.js，编辑如下：

var path = require("path");
module.exports = {
  entry: "./es6/main.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: path.join(__dirname, "es6"),
        loader: "babel-loader",
        query: {
          presets: ["es2015"]
        }
      }
    ]
  }
}

module.exports导出的对象即是 webpack 的配置对象，其中：

entry 是入口文件

output 是输出文件，这里的 filename 给的是 bundle.js，也就是当 webpack 运行完之后将生成一个 bundle.js 文件

loaders 是使用到的所有加载器，在 gulp 里面我们都是使用的是 gulp 的一些插件比如 gulp-rename、gulp-concat 等等，在 webpack 里面类似，使用的是各种 loaders，详细的 loaders 列表在这里。

更多配置属性的含义在这里。

这里使用了一个叫 babel-loader 的加载器，在使用 gulp 进行ES6开发里面有介绍过，我们都是使用 babel 对 ES6 风格的代码进行转换，所以在 query 里面同样使用了 es2015 转码规则。下面就安装这个加载器。

四、安装 loaders 安装 babel-loader

npm install babel-loader --save-dev

安装转码规则

npm install babel-preset-es2015 --save-dev

至此准备工作已经做完了，下面可以编写代码了。

五、码代码 /es6/main.js

import Person from "./Person.js";

let p = new Person("张三", 20);
document.write(p.say());

/es6/Person.js

class Person{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }

  say(){
    return `我是${this.name},我今年${this.age}岁了。`;
  }
}

export default Person;

index.html

在这里就可以直接引用 bundle.js 了。




  
  Document

六、运行

因为有 webpack.config.js 配置文件，所以只需要输入 webpack 就能运行， webpack 会自动去执行配置文件的内容：

webpack

对于大型项目，可能 webpack 会运行很久，所以可以添加一个进度条便于查看：

webpack --progress --colors

在 gulp 里，使用 watch 可以监视文件的变化，而在 webpack 里，只需加一个参数：

webpack --watch

所以，我们可以使用下面的命令运行：

webpack --progress --colors --watch

就是这么简单！

GPU云服务器云服务器 webpack使用 webpack 使用公用cdn 如何进行区块链开发怎样进行小程序开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78695.html

ES6-开发环境搭建（1）

摘要：全局安装本地安装转码规则安装完成后，我们可以看一下我们的文件，已经多了选项。直接在线编译提供一个在线编译器，可以在线将代码转为代码。古语有云：君子生非异也，善假于物；工欲善其事，必先利其器。由于有些低版本的浏览器还是不支持ES6语法，学习ES6，首先要学会搭建一个基本的ES6开发环境，利用工具，把ES6的语法转变成ES5的语法。 1、使用Babel把ES6编译成ES5 1...

android_c 2019-08-23 15:21 评论0 收藏0
前端构建_webpack

摘要：一个文件，一张图片一个文件都是一个模块，都能用导入模块的语法的，的导入进来。自身只能读懂类型的文件，其它的都不认识。 webpack 是什么？ webpack是一个前端模块化打包工具指（由于模块化开发，所以需要打包，这里所说的模块化开发主要指JS) 由于现代前端应用程序越来越复杂，需要采用模块化进行开发，但浏览器还未支持模块化开发，所以webpack才诞生 webpack默认只支持js...

ethernet 2019-08-23 14:24 评论0 收藏0
vue-cli + es6 多页面项目开发及部署

摘要：前段时间项目组计划快速开发一个新的项目，开发那边提供壳子和部分系统级功能，所有的页面由完成，考虑兼容性安卓及。后面会继续优化，先把目前的基本部署方式记录下来。前段时间项目组计划快速开发一个新的App项目，App开发那边提供壳子和部分系统级功能，所有的页面由h5完成，考虑兼容性安卓4.1及ios7.1。全新的项目，没有历史包袱，就尝试了新的开发模式，采用了webpack + vue-c...

felix0913 2019-08-22 15:35 评论0 收藏0
webpack 项目构建：（二）ES6 编译环境搭建

摘要：本质就是一个编译器，通过将源代码解析成抽象语法树将源代码的结果一系列转换生成目标代码的将目标代码的转换成代码。项目构建三开发环境本地服务器搭建源码下载地址参考资料入门阮一峰中文文档中文网注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。在上一章 webpack 项目构建：（一）基本架构搭建我们搭建了一个最基本的 webpack 项目，现...

marser 2019-08-22 15:08 评论0 收藏0