詳解Webpack + ES6 最新環(huán)境搭建與配置

更新時(shí)間：2018年06月04日 13:50:42 作者：油炸土豆

這篇文章主要介紹了詳解Webpack + ES6 最新環(huán)境搭建與配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一，準(zhǔn)備工作

1.下載node.js 和 npm

2.將鏡像源替換為淘寶鏡像

二，創(chuàng)建目錄及安裝webpack創(chuàng)建項(xiàng)目

在命令行中輸入 npm init -y

我們看到了項(xiàng)目中多了一個(gè)package.json文件，它定義了這個(gè)項(xiàng)目中所需各種模板及項(xiàng)目中的配置信息。該對(duì)象的每一個(gè)成員就是當(dāng)前項(xiàng)目的一項(xiàng)設(shè)置。詳細(xì)設(shè)置信息請(qǐng)參考 https://docs.npmjs.com/files/package.json

安裝webpack

全局安裝webpack,在命令行輸入

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

在webpack4中webpack和webpack-cli分開(kāi)了，因此需要分開(kāi)安裝

當(dāng)前目錄下安裝一個(gè)webpack

在命令行輸入

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

什么是全局安裝？

其中參數(shù)-g的含義是代表安裝到全局環(huán)境里面，包安裝在Node安裝目錄下的node_modules文件夾中，一般在 \Users\用戶名\AppData\Roaming\ 目錄下，可以使用npm root -g查看全局安裝目錄。

全局安裝后可以供命令行(command line)使用，用戶可以在命令行中直接運(yùn)行該組件包支持的命令，如下圖全局安裝cnpm后的cmd文件

什么是本地安裝

本地安裝方式是輸入命令：npm install eslint 或npm install eslint --save-dev等，其中參數(shù)--save-dev的含義是代表把你的安裝包信息寫(xiě)入package.json文件的devDependencies字段中，包安裝在我們執(zhí)行命令的根目錄下的node_modules文件夾下。本地安裝后可以直接通過(guò)require()的方式引入項(xiàng)目中node_modules目錄下的模塊，如下示例，本地安裝后直接在gulpfile.js中require('webpack')。如下圖

我們?cè)谑褂脮r(shí)，建議都使用本地安裝，本地安裝可以讓每個(gè)項(xiàng)目擁有獨(dú)立的包，不受全局包的影響，方便項(xiàng)目的移動(dòng)、復(fù)制、打包等，保證不同版本包之間的相互依賴。缺點(diǎn)就是安裝時(shí)間較長(zhǎng)，占用內(nèi)存大，但是在磁盤越來(lái)越大的今天，他的缺點(diǎn)可以忽略。

使用webpack

1.我們?cè)诟夸浵聞?chuàng)建一個(gè)文件夾src來(lái)存放源文件
2.在創(chuàng)建一個(gè)文件夾build來(lái)存放編譯后的文件
3.新建index.html文件
4.創(chuàng)建配置文件webpack.config.js

創(chuàng)建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>

創(chuàng)建Main.js

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

配置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,//整個(gè)頁(yè)面的入口文件
 output: {
  path: buildPath,//打包輸出的地址
  filename: "bundle.js",//輸出的文件名稱
 },
 module: {
   }
}

在命令行輸入
webpack --mode development
bundle.js

webpack --mode development
bundle.js

webpack4中引入了生產(chǎn)和開(kāi)發(fā)模式,生產(chǎn)模式可以實(shí)現(xiàn)各種優(yōu)化。包括縮小，規(guī)模提升，tree-shaking等等,開(kāi)發(fā)模式針對(duì)速度進(jìn)行了優(yōu)化，只不過(guò)是提供未縮小的捆綁包

我們使用ES6的語(yǔ)法來(lái)試一試

//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

打開(kāi)index.html

webpack-v4.10.2會(huì)識(shí)別es6語(yǔ)法并編譯

我們也可以使用babel來(lái)對(duì)ES6進(jìn)行編譯

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

修改配置項(xiàng)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,//整個(gè)頁(yè)面的入口文件
 output: {
  path: buildPath,//打包輸出的地址
  filename: "bundle.js",//輸出的文件名稱
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    loader: 'babel-loader?presets=es2015'
   }
  ]
 }
}

兩者的編譯結(jié)果存在部分差異，并不影響正確性。

三，webpack加載資源文件根據(jù)模版文件生成訪問(wèn)入口

我們?cè)诓渴痦?xiàng)目時(shí)，部署的是build中的文件，并不會(huì)將我們src/index.html作為訪問(wèn)的入口，因此，我們需要將index.html移動(dòng)到build下，但是簡(jiǎn)單的復(fù)制過(guò)去是不行的，由于文件目錄的不同，如果使用了相對(duì)路徑，那么就會(huì)找不到文件。這時(shí)候我們就可以用到webpack的插件 html-webpack-plugin，它可以將我們src/index.html作為模版，生成一份新的index.html在build下。

具體的用法請(qǐng)查看https://github.com/jantimon/html-webpack-plugin#third-party-addons

在本例只是簡(jiǎn)單使用。

執(zhí)行

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

之前我們是將index.html中的js入口指定為build/bundle.js,使用這個(gè)插件后，我們?cè)O(shè)置它直接指向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,//整個(gè)頁(yè)面的入口文件
 output: {
  path: buildPath,//打包輸出的地址
  filename: "bundle.js",//輸出的文件名稱
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    loader: 'babel-loader?presets=es2015'
   }
  ]
 },
 plugins: [
  new HtmlWebpackPlugin({
   /*
   template 參數(shù)指定入口 html 文件路徑，插件會(huì)把這個(gè)文件交給 webpack 去編譯，
   webpack 按照正常流程，找到 loaders 中 test 條件匹配的 loader 來(lái)編譯，那么這里 html-loader 就是匹配的 loader
   html-loader 編譯后產(chǎn)生的字符串，會(huì)由 html-webpack-plugin 儲(chǔ)存為 html 文件到輸出目錄，默認(rèn)文件名為 index.html
   可以通過(guò) filename 參數(shù)指定輸出的文件名
   html-webpack-plugin 也可以不指定 template 參數(shù)，它會(huì)使用默認(rèn)的 html 模板。
   */
   template: './src/index.html',
   /*
   因?yàn)楹?webpack 4 的兼容性問(wèn)題，chunksSortMode 參數(shù)需要設(shè)置為 none
   https://github.com/jantimon/html-webpack-plugin/issues/870
   */
   chunksSortMode: 'none'
  }),
 ]
}

輸入指令打包我們會(huì)發(fā)現(xiàn)，build下的index.html已經(jīng)生成,并且指向了編譯的后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("<img src=\"./asset/atlas.png\"/>");
  }
}
new Main();

并將圖片展示到頁(yè)面

圖裂了，找不到資源，大家應(yīng)該都猜到了，應(yīng)為在編譯時(shí)，直接將<img src=\"./asset/atlas.png\"/> 添加到了build/index.html，build下并沒(méi)有asset包，所以找不到資源。難道我們需要在build下在建立一個(gè)資源文件夾嗎？答案是不用，webpack可以對(duì)圖片的路徑進(jìn)行轉(zhuǎn)換和圖片打包。

輸入指令

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,//整個(gè)頁(yè)面的入口文件
 output: {
  path: buildPath,//打包輸出的地址
  filename: "bundle.js",//輸出的文件名稱
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    loader: 'babel-loader?presets=es2015'
   } ,
   {
    //url-loader的主要功能是：將源文件轉(zhuǎn)換成DataUrl(聲明文件mimetype的base64編碼)
    //小于limit字節(jié)，以 base64 的方式引用，大于limit就交給file-loader處理了
    //file-loader的主要功能是：把源文件遷移到指定的目錄（可以簡(jiǎn)單理解為從源文件目錄遷移到build目錄
    test: /\.(jpg|png|gif)$/,
    loader: 'url-loader?limit=8192&name=asset/[hash:8].[name].[ext]'
   }
  ]
 },
 plugins: [
  new HtmlWebpackPlugin({
   /*
   template 參數(shù)指定入口 html 文件路徑，插件會(huì)把這個(gè)文件交給 webpack 去編譯，
   webpack 按照正常流程，找到 loaders 中 test 條件匹配的 loader 來(lái)編譯，那么這里 html-loader 就是匹配的 loader
   html-loader 編譯后產(chǎn)生的字符串，會(huì)由 html-webpack-plugin 儲(chǔ)存為 html 文件到輸出目錄，默認(rèn)文件名為 index.html
   可以通過(guò) filename 參數(shù)指定輸出的文件名
   html-webpack-plugin 也可以不指定 template 參數(shù)，它會(huì)使用默認(rèn)的 html 模板。
   */
   template: './src/index.html',
   /*
   因?yàn)楹?webpack 4 的兼容性問(wèn)題，chunksSortMode 參數(shù)需要設(shè)置為 none
   https://github.com/jantimon/html-webpack-plugin/issues/870
   */
   chunksSortMode: 'none'
  }),
 ]
}

編譯后的目錄如下(新增一張較大的圖片book用于展示file-loader)

頁(yè)面效果如下，圖是隨便找的，見(jiàn)諒。

注意:當(dāng)我們引入一些資源需要使用變量引用時(shí)，像這樣引用的話是會(huì)編譯失敗的

圖片并沒(méi)有像上圖一樣打包到asset中

當(dāng)我們?cè)趓equire一個(gè)模塊的時(shí)候，如果在require中包含變量，像這樣：

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

那么在編譯的時(shí)候我們是不能知道具體的模塊的。但這個(gè)時(shí)候，webpack也會(huì)為我們做些分析工作：

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

2.提取正則表達(dá)式：'/^.*\.png$/'；

于是這個(gè)時(shí)候?yàn)榱烁玫嘏浜蟱enpack進(jìn)行編譯，我們應(yīng)該給它指明路徑

使用webpack打包c(diǎn)ss文件

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

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

//rules中添加
{
//css-loader使能夠使用類似@import和url（...）的方法實(shí)現(xiàn)require,style-loader將所有的計(jì)算后的樣式加入頁(yè)面中
//webpack肯定是先將所有css模塊依賴解析完得到計(jì)算結(jié)果再創(chuàng)建style標(biāo)簽。因此應(yīng)該把style-loader放在css-loader的前面
test: /\.css$/,
use: ['style-loader', 'css-loader']
}

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

四，搭建webpack微服務(wù)器

在開(kāi)發(fā)過(guò)程中，我們不可能修改一次，打包一次。因此我們需要使用到webpack提供的服務(wù)器。

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

為了方便我們?cè)趐ack.json中配置腳本。

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

npm run start

啟動(dòng)成功后訪問(wèn)服務(wù)地址，就可以實(shí)現(xiàn)修改代碼之后，頁(yè)面實(shí)時(shí)刷新。

啟動(dòng)時(shí)使用的是默認(rèn)配置。

當(dāng)我們需要個(gè)性化設(shè)置時(shí)，在webpack.config.js中添加設(shè)置即可

//以下是服務(wù)環(huán)境配置
devServer:{
port:8085,//端口
host:'localhost',//地址
inline:true,//用來(lái)支持dev-server自動(dòng)刷新
open:true,//開(kāi)啟webpack-dev-server時(shí)自動(dòng)打開(kāi)頁(yè)面
historyApiFallback:true,
contentBase:path.resolve(__dirname),//用來(lái)指定index.html所在目錄
publicPath:'/build/',//用來(lái)指定編譯后的bundle.js的目錄
openPage:"build/index.html"http://指定打開(kāi)的頁(yè)面
}

這樣，一個(gè)簡(jiǎn)單的webpack4 + ES6的開(kāi)發(fā)環(huán)境就搭建完畢。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: