Maison > Article > interface Web > Comment configurer et créer l'environnement pour Webpack + ES6

Comment configurer et créer l'environnement pour Webpack + ES6

php中世界最好的语言original: 2018-06-05 09:34:512432parcourir

Cette fois, je vais vous montrer comment configurer et créer l'environnement pour Webpack + ES6. Quelles sont les précautions pour configurer et créer l'environnement pour Webpack + ES6. Ce qui suit est un cas pratique, commençons. jetez un oeil.

1. Préparation

1. Téléchargez node.js et npm

2. la source de l'image avec l'image Taobao

2. Créez le répertoire et installez le webpack Créez le projet

dans le ligne de commande Entrez npm init -y

Nous voyons qu'il existe un fichier package.json supplémentaire dans le projet, qui définit les différents modèles requis dans ce projet et les informations de configuration dans le projet. Chaque membre de cet objet est un paramètre pour le projet en cours. Pour des informations détaillées sur les paramètres, veuillez vous référer à https://docs.npmjs.com/files/package.json

Installer le webpack

Installer le webpack globalement, entrez

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

Dans webpack4, webpack et webpack-cli sont séparés, ils doivent donc être installés séparément

Installer un webpack dans le répertoire actuel

Entrez

en ligne de commande

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

Qu'est-ce que l'installation globale ?

Le paramètre -g signifie l'installation dans l'environnement global. Le package est installé dans le dossier node_modules sous le répertoire d'installation de Node, généralement sous le répertoire du nom d'utilisateur AppDataRoaming. Vous pouvez utiliser npm root - gView le. répertoire d'installation global.

Après l'installation globale, il peut être utilisé par la ligne de commande (les utilisateurs peuvent exécuter directement les composants pris en charge par celui-ci). package de composants dans la ligne de commande. Commandez, comme indiqué ci-dessous, le fichier cmd après l'installation globale de cnpm

Qu'est-ce que l'installation locale

La méthode d'installation locale consiste à entrez la commande : npm install eslint ou npm install eslint --save -dev, etc. Le paramètre --save-dev signifie écrire les informations de votre package d'installation dans le champ devDependencies du fichier package.json. Le package est installé dans node_modules. dossier dans le répertoire racine où nous exécutons la commande. Après l'installation locale, vous pouvez directement introduire les modules dans le répertoire node_modules du projet via require(). Dans l'exemple suivant, après l'installation locale, directement require('webpack') dans gulpfile.js. Comme indiqué ci-dessous

Lorsque nous l'utilisons, il est recommandé d'utiliser l'installation locale. L'installation locale permet à chaque projet d'avoir un package indépendant, qui n'est pas affecté par le package global. et est pratique pour le projet Déplacer, copier, empaqueter, etc. pour assurer l'interdépendance entre les différentes versions des packages. Les inconvénients sont que son installation prend beaucoup de temps et occupe beaucoup de mémoire. Cependant, à mesure que les disques deviennent de plus en plus gros aujourd'hui, ses inconvénients peuvent être ignorés.

Utiliser webpack

1 Nous créons un dossier src dans le répertoire pour stocker les fichiers sources

2 Créer un dossier build pour stocker la compilation La finale. fichier
3. Créez un nouveau fichier index.html
4. Créez le fichier de configuration webpack.config.js

Créez 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>

Créer Main.js

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

Configurer 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: {
   }
}

Entrer sur la ligne de commande

webpack --mode development
bundle .js

webpack --mode development

bundle.js

Les modes de production et de développement ont été introduits dans webpack4, le mode Production permet diverses optimisations. Y compris la réduction, la mise à l'échelle, le tremblement d'arbre, etc., le mode de développement est optimisé pour la vitesse, mais ne fournit que des bundles non minifiés

Nous utilisons la syntaxe ES6 pour l'essayer

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

Compilé 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中文网其它相关文章！

Articles Liés

Voir plus