So konfigurieren und erstellen Sie die Umgebung für Webpack + ES6-js-Tutorial-php.cn

Dieses Mal zeige ich Ihnen, wie Sie die Umgebung für Webpack + ES6 konfigurieren und erstellen. Was sind die Vorsichtsmaßnahmen für die Konfiguration und den Aufbau der Umgebung für Webpack + ES6? Schauen Sie mal rein.

1. Vorbereitung

1. Laden Sie node.js und npm herunter

2 die Bildquelle mit dem Taobao-Bild

2. Erstellen Sie das Verzeichnis und installieren Sie das Webpack Erstellen Sie das Projekt

im Befehlszeile Geben Sie npm init -y

ein. Wir sehen, dass es im Projekt eine zusätzliche package.json-Datei gibt, die die verschiedenen in diesem Projekt erforderlichen Vorlagen und die Konfigurationsinformationen definiert im Projekt. Jedes Mitglied dieses Objekts ist eine Einstellung für das aktuelle Projekt. Detaillierte Einstellungsinformationen finden Sie unter https://docs.npmjs.com/files/package.json

Webpack installieren

Webpack global installieren, geben Sie

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

Nach dem Login kopieren

In webpack4 sind Webpack und webpack-cli getrennt, daher müssen sie separat installiert werden

Installieren Sie ein Webpack im aktuellen Verzeichnis

Geben Sie

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

Nach dem Login kopieren

ein

Was ist eine globale Installation?

Der Parameter -g bedeutet Installation in der globalen Umgebung. Das Paket wird im Ordner „node_modules“ im Node-Installationsverzeichnis installiert, normalerweise unter dem Benutzernamen „AppDataRoaming“. Sie können npm root – gView verwenden globales Installationsverzeichnis.

Nach der globalen Installation kann es über die Befehlszeile (Befehlszeile) verwendet werden. Benutzer können die dadurch unterstützten Komponenten direkt ausführen Geben Sie wie unten gezeigt die Befehlszeile ein, um die cmd-Datei nach der globalen Installation von cnpm zu öffnen.

Was ist die lokale Installation? Geben Sie den Befehl ein: npm install eslint oder npm install eslint --save -dev usw. Der Parameter --save-dev bedeutet, dass Sie Ihre Installationspaketinformationen in das Feld devDependencies der Datei package.json schreiben. Das Paket wird in den node_modules installiert Ordner im Stammverzeichnis, in dem wir den Befehl ausführen. Nach der lokalen Installation können Sie die Module über require() direkt in das Verzeichnis node_modules des Projekts einführen. Wie im folgenden Beispiel gezeigt, können Sie nach der lokalen Installation direkt require('webpack') in gulpfile.js eingeben. Wie unten gezeigt

Wenn wir es verwenden, wird die lokale Installation empfohlen. Durch die lokale Installation kann jedes Projekt ein unabhängiges Paket haben, das nicht vom globalen Paket betroffen ist und ist praktisch für das Projekt. Verschieben, Kopieren, Verpacken usw., um die gegenseitige Abhängigkeit zwischen verschiedenen Versionen von Paketen sicherzustellen. Die Nachteile bestehen darin, dass die Installation lange dauert und viel Speicher beansprucht. Da die Festplatten heutzutage jedoch immer größer werden, können die Nachteile ignoriert werden.

Webpack verwenden

1 Wir erstellen einen Ordner src im Verzeichnis, um die Quelldateien zu speichern

2. Erstellen Sie einen Ordner build, um die Zusammenstellung zu speichern Datei

3. Erstellen Sie eine neue index.html-Datei4. Erstellen Sie die Konfigurationsdatei webpack.config.js

Erstellen Sie 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>

Nach dem Login kopieren

Erstellen Sie Main.js

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

Nach dem Login kopieren

Konfigurieren Sie 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: {
   }
}

Nach dem Login kopieren

Geben Sie

webpack --mode development

bundle.js

ein Befehlszeile

webpack --mode development
bundle.js

Webpack 4 führt Produktions- und Entwicklungsmodi ein, die realisiert werden können verschiedene Optimierungen. Einschließlich Reduzierung, Skalierung, Tree-Shaking usw. ist der Entwicklungsmodus auf Geschwindigkeit optimiert, bietet jedoch nur nicht minimierte Bundles

Wir verwenden die ES6-Syntax, um es auszuprobieren

//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();

Nach dem Login kopieren

Kompiliertes 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'
   }
  ]
 }
}

Nach dem Login kopieren

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

三，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

Nach dem Login kopieren

之前我们是将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>

Nach dem Login kopieren

/* 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'
  }),
 ]
}

Nach dem Login kopieren

输入指令打包我们会发现，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();

Nach dem Login kopieren

并将图片展示到页面

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

输入指令

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

Nach dem Login kopieren

/*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'
  }),
 ]
}

Nach dem Login kopieren

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

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

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

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

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

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

Nach dem Login kopieren

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

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

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

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

使用webpack打包css文件

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

四，搭建webpack微服务器

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

npm run start

Nach dem Login kopieren

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

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

当我们需要个性化设置时，在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"//指定打开的页面
}

Nach dem Login kopieren

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