詳解Webpack + ES6 最新環(huán)境搭建與配置
一，準備工作
1.下載node.js 和 npm
2.將鏡像源替換為淘寶鏡像
二，創(chuàng)建目錄及安裝webpack創(chuàng)建項目
在命令行中輸入 npm init -y
我們看到了項目中多了一個package.json文件，它定義了這個項目中所需各種模板及項目中的配置信息。該對象的每一個成員就是當前項目的一項設置。詳細設置信息請參考 https://docs.npmjs.com/files/package.json
安裝webpack
全局安裝webpack,在命令行輸入
npm install webpack -g npm install webpack-cli -g
在webpack4中webpack和webpack-cli分開了，因此需要分開安裝
當前目錄下安裝一個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)使用，用戶可以在命令行中直接運行該組件包支持的命令，如下圖全局安裝cnpm后的cmd文件
什么是本地安裝
本地安裝方式是輸入命令：npm install eslint 或npm install eslint --save-dev等，其中參數(shù)--save-dev的含義是代表把你的安裝包信息寫入package.json文件的devDependencies字段中，包安裝在我們執(zhí)行命令的根目錄下的node_modules文件夾下。本地安裝后可以直接通過require()的方式引入項目中node_modules目錄下的模塊，如下示例，本地安裝后直接在gulpfile.js中require('webpack')。如下圖
我們在使用時，建議都使用本地安裝，本地安裝可以讓每個項目擁有獨立的包，不受全局包的影響，方便項目的移動、復制、打包等，保證不同版本包之間的相互依賴。缺點就是安裝時間較長，占用內存大，但是在磁盤越來越大的今天，他的缺點可以忽略。
使用webpack
1.我們在跟目錄下創(chuàng)建一個文件夾src來存放源文件
2.在創(chuàng)建一個文件夾build來存放編譯后的文件
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,//整個頁面的入口文件
output: {
path: buildPath,//打包輸出的地址
filename: "bundle.js",//輸出的文件名稱
},
module: {
}
}
在命令行輸入
webpack --mode development
bundle.js
webpack --mode development
bundle.js
webpack4中引入了生產和開發(fā)模式,生產模式可以實現(xiàn)各種優(yōu)化。 包括縮小，規(guī)模提升，tree-shaking等等,開發(fā)模式針對速度進行了優(yōu)化，只不過是提供未縮小的捆綁包
我們使用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加載資源文件根據(jù)模版文件生成訪問入口
我們在部署項目時，部署的是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
在本例只是簡單使用。
執(zhí)行
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 參數(shù)指定入口 html 文件路徑，插件會把這個文件交給 webpack 去編譯，
webpack 按照正常流程，找到 loaders 中 test 條件匹配的 loader 來編譯，那么這里 html-loader 就是匹配的 loader
html-loader 編譯后產生的字符串，會由 html-webpack-plugin 儲存為 html 文件到輸出目錄，默認文件名為 index.html
可以通過 filename 參數(shù)指定輸出的文件名
html-webpack-plugin 也可以不指定 template 參數(shù)，它會使用默認的 html 模板。
*/
template: './src/index.html',
/*
因為和 webpack 4 的兼容性問題，chunksSortMode 參數(shù)需要設置為 none
https://github.com/jantimon/html-webpack-plugin/issues/870
*/
chunksSortMode: 'none'
}),
]
}
輸入指令打包我們會發(fā)現(xiàn)，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("<img src=\"./asset/atlas.png\"/>");
}
}
new Main();
并將圖片展示到頁面
圖裂了，找不到資源，大家應該都猜到了，應為在編譯時，直接將<img src=\"./asset/atlas.png\"/> 添加到了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字節(jié)，以 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 參數(shù)指定入口 html 文件路徑，插件會把這個文件交給 webpack 去編譯，
webpack 按照正常流程，找到 loaders 中 test 條件匹配的 loader 來編譯，那么這里 html-loader 就是匹配的 loader
html-loader 編譯后產生的字符串，會由 html-webpack-plugin 儲存為 html 文件到輸出目錄，默認文件名為 index.html
可以通過 filename 參數(shù)指定輸出的文件名
html-webpack-plugin 也可以不指定 template 參數(shù)，它會使用默認的 html 模板。
*/
template: './src/index.html',
/*
因為和 webpack 4 的兼容性問題，chunksSortMode 參數(shù)需要設置為 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（...）的方法實現(xiàn)require,style-loader將所有的計算后的樣式加入頁面中
//webpack肯定是先將所有css模塊依賴解析完得到計算結果再創(chuàng)建style標簽。因此應該把style-loader放在css-loader的前面
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
添加main.css文件，
span{color:red;}
目錄如下
四，搭建webpack微服務器
在開發(fā)過程中，我們不可能修改一次，打包一次。因此我們需要使用到webpack提供的服務器。
cnpm install webpack-dev-server --save-dev
為了方便我們在pack.json中配置腳本。
"start":"webpack-dev-server--modedevelopment", "dev":"webpack--modedevelopment", "build":"webpack--modeproduction"
npm run start
啟動成功后訪問服務地址，就可以實現(xiàn)修改代碼之后，頁面實時刷新。
啟動時使用的是默認配置。
當我們需要個性化設置時，在webpack.config.js中添加設置即可
//以下是服務環(huán)境配置
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"http://指定打開的頁面
}
這樣，一個簡單的webpack4 + ES6的開發(fā)環(huán)境就搭建完畢。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JavaScript實現(xiàn)拖拽網頁內元素的方法,以注釋形式較為詳細的分析了javascript事件監(jiān)聽、元素定位的相關技巧,并配有詳細的注釋以便于理解,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)select選擇框效果，及美化select選擇框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
本篇文章主要是對js鼠標移動顯示圖片的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
下面小編就為大家?guī)硪黄钊肜斫釳VC中的時間js格式化。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
layui表單驗證select下拉框實現(xiàn)驗證的方法
今天小編就為大家分享一篇layui表單驗證select下拉框實現(xiàn)驗證的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
countUp.js實現(xiàn)數(shù)字動態(tài)變化效果
這篇文章主要為大家詳細介紹了countUp.js實現(xiàn)數(shù)字動態(tài)變化效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
JS使用canvas中的measureText方法測量字體寬度示例
這篇文章主要介紹了JS使用canvas中的measureText方法測量字體寬度,結合實例形式分析了canvas的measureText方法相關使用技巧,需要的朋友可以參考下2019-02-02
前我寫過一篇關于JavaScript如何實現(xiàn)面向對象編程的文章。今天，我寫這篇文章跟大家討論一下，如何實現(xiàn)事件。2009-07-07
JavaScript擅長于修改頁面中的DOM元素，但是我們使用JavaScript通常只是實現(xiàn)一些簡單功能，例如實現(xiàn)圖片的翻轉，網頁中的標簽頁，等等。這篇文章將向你展示如何在頁面中，對創(chuàng)建的元素實現(xiàn)拖放。2010-01-01
這篇文章主要介紹了詳解js中class的多種函數(shù)封裝方法，介紹了不同函數(shù)的封裝方法，感興趣的朋友可以參考一下2016-01-01