집 > 기사 > 웹 프론트엔드 > Webpack + ES6 환경을 구성하고 구축하는 방법

Webpack + ES6 환경을 구성하고 구축하는 방법

php中世界最好的语言원래의: 2018-06-05 09:34:512398검색

이번에는 Webpack + ES6 환경 구성 및 구축 방법을 알려드리겠습니다. Webpack + ES6 환경 구성 및 구축 시 주의사항은 무엇인가요?

1. node.js와 npm을 다운로드하세요

2. 디렉토리를 만들고 webpack을 설치하세요

프로젝트에 이 프로젝트에 필요한 다양한 템플릿과 프로젝트의 구성 정보를 정의하는 추가 package.json 파일이 있는 것을 볼 수 있습니다. 이 개체의 각 구성원은 현재 프로젝트에 대한 설정입니다. 자세한 설정 내용은 https://docs.npmjs.com/files/package.json

Install webpack

웹팩을 전역적으로 설치하고, webpack4, webpack, webpack에서 명령줄에

npm install webpack -g
npm install webpack-cli -g

를 입력하세요. -cli 를 분리해서 설치해야 합니다현재 디렉터리에 웹팩을 설치하세요

명령줄에

npm installwebpack-cli--save-dev
npm installwebpack--save-dev

를 입력하세요

글로벌 설치란 무엇인가요?

매개변수 -g는 전역 환경에 대한 설치를 의미합니다. 패키지는 일반적으로 사용자 사용자 이름 AppDataRoaming 디렉터리 아래의 node_modules 폴더에 설치됩니다. 전역 설치 디렉터리를 보려면.

전역 설치 후 명령줄에서 사용할 수 있습니다. 사용자는 cnpm 전역 설치 후 cmd 파일과 같이 명령줄에서 이 구성 요소 패키지가 지원하는 명령을 직접 실행할 수 있습니다.

로컬 설치란 무엇입니까

로컬 설치 방법은 npm install eslint 또는 npm install eslint --save-dev 등의 명령을 입력하는 것입니다. --save-dev 매개변수는 설치 패키지 정보를 패키지에 쓰는 것을 의미합니다. .json 파일에서 패키지는 명령을 실행하는 루트 디렉터리의 node_modules 폴더에 설치됩니다. 로컬 설치 후 require()를 통해 프로젝트의 node_modules 디렉터리에 모듈을 직접 도입할 수 있습니다. 다음 예와 같이 로컬 설치 후 gulpfile.js에서 직접 require('webpack')을 추가하면 됩니다. 아래와 같이

사용할 때는 로컬 설치를 권장합니다. 로컬 설치를 사용하면 각 프로젝트가 글로벌 패키지의 영향을 받지 않는 독립적인 패키지를 가질 수 있으며 이동, 복사, 패키징이 용이합니다. 등을 통해 패키지 간의 서로 다른 버전을 보장합니다. 단점은 설치 시간이 오래 걸리고 메모리도 많이 차지한다는 점이다. 그러나 오늘날 디스크가 점점 커지면서 그 단점은 무시할 수 있다.

webpack을 사용하여

1. 디렉토리에 소스 파일을 저장할 폴더를 만듭니다2. 컴파일된 파일을 저장할 폴더 빌드를 만듭니다.3. 새로운 index.html 파일을 만듭니다. 구성 파일 webpack.config.js

Create index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hi webpack4!</title>
</head>
<body>
<script src = "../build/bundle.js"></script>
</body>
</html>

Create Main.js

document.write("Hi webpack4 + ES6!");

Configure webpack.config.js

var path = require('path');
var appPath = path.resolve(dirname, './src/Main.js');
var buildPath = path.resolve(dirname, './build');
module.exports = {
 entry: appPath,//整个页面的入口文件
 output: {
  path: buildPath,//打包输出的地址
  filename: "bundle.js",//输出的文件名称
 },
 module: {
   }
}

명령줄에 입력

webpack --mode development

bundle.js

webpack --mode development

bundle.js

webpack4에는 프로덕션 및 개발 모드가 도입되었으며 프로덕션 모드는 다양한 최적화를 달성할 수 있습니다. 축소, 확장, 트리 쉐이킹 등 개발 모드는 속도에 최적화되어 있지만 축소되지 않은 번들만 제공합니다

ES6 구문을 사용하여 한번 시도해 보세요

//Main.js
import {Dog} from "./Dog";
class Main {
 constructor() {
  document.write("Hi webpack4 + ES6!");
  console.info("Hi webpack4 + ES6");
  let dog = new Dog();
 }
}
new Main();

컴파일된 Bundle.js

打开index.html

webpack-v4.10.2会识别es6语法并编译

我们也可以使用babel来对ES6进行编译

输入 npm install babel-loader --save-dev

修改配置项webpack.config.js

var path = require('path');
var appPath = path.resolve(dirname, './src/Main.js');
var buildPath = path.resolve(dirname, './build');
module.exports = {
 entry: appPath,//整个页面的入口文件
 output: {
  path: buildPath,//打包输出的地址
  filename: "bundle.js",//输出的文件名称
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    loader: 'babel-loader?presets=es2015'
   }
  ]
 }
}

两者的编译结果存在部分差异，并不影响正确性。

三，webpack加载资源文件根据模版文件生成访问入口

我们在部署项目时，部署的是build中的文件，并不会将我们src/index.html作为访问的入口，因此，我们需要将index.html移动到build下，但是简单的复制过去是不行的，由于文件目录的不同，如果使用了相对路径，那么就会找不到文件。这时候我们就可以用到webpack的插件 html-webpack-plugin，它可以将我们src/index.html作为模版，生成一份新的index.html在build下。

具体的用法请查看https://github.com/jantimon/html-webpack-plugin#third-party-addons

在本例只是简单使用。

执行

npm i --save-dev html-webpack-plugin

之前我们是将index.html中的js入口指定为build/bundle.js,使用这个插件后，我们设置它直接指向Main.js

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hi webpack4!</title>
</head>
<body>
<script src = "Main.js"></script>
</body>
</html>

/* webpack.config.js */
var path = require('path');
var appPath = path.resolve(dirname, './src/Main.js');
var buildPath = path.resolve(dirname, './build');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
 entry: appPath,//整个页面的入口文件
 output: {
  path: buildPath,//打包输出的地址
  filename: "bundle.js",//输出的文件名称
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    loader: 'babel-loader?presets=es2015'
   }
  ]
 },
 plugins: [
  new HtmlWebpackPlugin({
   /*
   template 参数指定入口 html 文件路径，插件会把这个文件交给 webpack 去编译，
   webpack 按照正常流程，找到 loaders 中 test 条件匹配的 loader 来编译，那么这里 html-loader 就是匹配的 loader
   html-loader 编译后产生的字符串，会由 html-webpack-plugin 储存为 html 文件到输出目录，默认文件名为 index.html
   可以通过 filename 参数指定输出的文件名
   html-webpack-plugin 也可以不指定 template 参数，它会使用默认的 html 模板。
   */
   template: './src/index.html',
   /*
   因为和 webpack 4 的兼容性问题，chunksSortMode 参数需要设置为 none
   https://github.com/jantimon/html-webpack-plugin/issues/870
   */
   chunksSortMode: 'none'
  }),
 ]
}

输入指令打包我们会发现，build下的index.html已经生成,并且指向了编译的后js

使用webpack打包图片和文件

我们新增资源文件夹asset 并添加一张图片

import {Dog} from "./Dog";
class Main {
  constructor() {
    document.write("Hi webpack4 + ES6!");
    console.info("Hi webpack4 + ES6");
    let dog = new Dog();
    document.write("");
  }
}
new Main();

并将图片展示到页面

图裂了，找不到资源，大家应该都猜到了，应为在编译时，直接将添加到了build/index.html，build下并没有asset包，所以找不到资源。难道我们需要在build下在建立一个资源文件夹吗？答案是不用，webpack可以对图片的路径进行转换和图片打包。

输入指令

npm install url-loader --save-dev
npm install file-loader --save-dev

/*webpack.config.js*/
var path = require('path');
var appPath = path.resolve(dirname, './src/Main.js');
var buildPath = path.resolve(dirname, './build');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
 entry: appPath,//整个页面的入口文件
 output: {
  path: buildPath,//打包输出的地址
  filename: "bundle.js",//输出的文件名称
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    loader: 'babel-loader?presets=es2015'
   } ,
   {
    //url-loader的主要功能是：将源文件转换成DataUrl(声明文件mimetype的base64编码)
    //小于limit字节，以 base64 的方式引用，大于limit就交给file-loader处理了
    //file-loader的主要功能是：把源文件迁移到指定的目录（可以简单理解为从源文件目录迁移到build目录
    test: /\.(jpg|png|gif)$/,
    loader: 'url-loader?limit=8192&name=asset/[hash:8].[name].[ext]'
   }
  ]
 },
 plugins: [
  new HtmlWebpackPlugin({
   /*
   template 参数指定入口 html 文件路径，插件会把这个文件交给 webpack 去编译，
   webpack 按照正常流程，找到 loaders 中 test 条件匹配的 loader 来编译，那么这里 html-loader 就是匹配的 loader
   html-loader 编译后产生的字符串，会由 html-webpack-plugin 储存为 html 文件到输出目录，默认文件名为 index.html
   可以通过 filename 参数指定输出的文件名
   html-webpack-plugin 也可以不指定 template 参数，它会使用默认的 html 模板。
   */
   template: './src/index.html',
   /*
   因为和 webpack 4 的兼容性问题，chunksSortMode 参数需要设置为 none
   https://github.com/jantimon/html-webpack-plugin/issues/870
   */
   chunksSortMode: 'none'
  }),
 ]
}

编译后的目录如下(新增一张较大的图片book用于展示file-loader)

页面效果如下，图是随便找的，见谅。

注意:当我们引入一些资源需要使用变量引用时，像这样引用的话是会编译失败的

图片并没有像上图一样打包到asset中

当我们在require一个模块的时候，如果在require中包含变量，像这样：

require("./asset/" + name + ".png");

那么在编译的时候我们是不能知道具体的模块的。但这个时候，webpack也会为我们做些分析工作：

1.分析目录：'./asset'；

2.提取正则表达式：'/^.*\.png$/'；

于是这个时候为了更好地配合wenpack进行编译，我们应该给它指明路径

使用webpack打包css文件

就像图片一样，webpack也提供了样式文件的打包，

npm install style-loader --save-dev
npm install css-loader --save-dev

//rules中添加
{
//css-loader使能够使用类似@import和url（...）的方法实现require,style-loader将所有的计算后的样式加入页面中
//webpack肯定是先将所有css模块依赖解析完得到计算结果再创建style标签。因此应该把style-loader放在css-loader的前面
test: /\.css$/,
use: ['style-loader', 'css-loader']
}

添加main.css文件，
span{color:red;}
目录如下

四，搭建webpack微服务器

在开发过程中，我们不可能修改一次，打包一次。因此我们需要使用到webpack提供的服务器。

cnpm install webpack-dev-server --save-dev

为了方便我们在pack.json中配置脚本。

"start":"webpack-dev-server--modedevelopment",
"dev":"webpack--modedevelopment",
"build":"webpack--modeproduction"

npm run start

启动成功后访问服务地址，就可以实现修改代码之后，页面实时刷新。

启动时使用的是默认配置。

当我们需要个性化设置时，在webpack.config.js中添加设置即可

//以下是服务环境配置
devServer:{
port:8085,//端口
host:'localhost',//地址
inline:true,//用来支持dev-server自动刷新
open:true,//开启webpack-dev-server时自动打开页面
historyApiFallback:true,
contentBase:path.resolve(dirname),//用来指定index.html所在目录
publicPath:'/build/',//用来指定编译后的bundle.js的目录
openPage:"build/index.html"//指定打开的页面
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Webpack + ES6 환경을 구성하고 구축하는 방법

관련 기사