Webpack + ES6 最新環境搭建與配置

時間  2019-11-14
標籤 webpack es6 最新 環境 搭建 配置 欄目 JavaScript 简体版
原文   原文鏈接

一，準備工做

1.下載node.js 和 npmcss

2.將鏡像源替換爲淘寶鏡像html

 

二，建立目錄及安裝webpack

建立項目

在命令行中輸入 npm init -ynode

咱們看到了項目中多了一個package.json文件，它定義了這個項目中所需各類模板及項目中的配置信息。該對象的每個成員就是當前項目的一項設置。詳細設置信息請參考 https://docs.npmjs.com/files/package.jsonwebpack

安裝webpack

全局安裝webpack,在命令行輸入
npm install webpack -g
npm install webpack-cli -g
在webpack4中webpack和webpack-cli分開了，所以須要分開安裝git

當前目錄下安裝一個webpack
在命令行輸入
npm install webpack-cli--save-dev
npm install webpack --save-deves6

什麼是全局安裝？

　　其中參數-g的含義是表明安裝到全局環境裏面，包安裝在Node安裝目錄下的node_modules文件夾中，通常在 \Users\用戶名\AppData\Roaming\ 目錄下，可使用npm root -g查看全局安裝目錄。github

全局安裝後能夠供命令行(command line)使用，用戶能夠在命令行中直接運行該組件包支持的命令，以下圖全局安裝cnpm後的cmd文件web

什麼是本地安裝

　　本地安裝方式是輸入命令：npm install eslint 或 npm install eslint --save-dev等，其中參數--save-dev的含義是表明把你的安裝包信息寫入package.json文件的devDependencies字段中，包安裝在咱們執行命令的根目錄下的node_modules文件夾下。本地安裝後能夠直接經過require()的方式引入項目中node_modules目錄下的模塊，以下示例，本地安裝後直接在gulpfile.js中require('webpack')。以下圖正則表達式

　　咱們在使用時，建議都使用本地安裝，本地安裝可讓每一個項目擁有獨立的包，不受全局包的影響，方便項目的移動、複製、打包等，保證不一樣版本包之間的相互依賴。缺點就是安裝時間較長，佔用內存大，可是在磁盤愈來愈大的今天，他的缺點能夠忽略。npm

 

使用webpack

1.咱們在跟目錄下建立一個文件夾src來存放源文件
2.在建立一個文件夾build來存放編譯後的文件
3.新建index.html文件
4.建立配置文件webpack.config.js

建立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>

建立Main.js

document.write("<span>Hi webpack4 + ES6!</span>");

配置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中引入了生產和開發模式,
生產模式能夠實現各類優化。 包括縮小，規模提高，tree-shaking等等,
開發模式針對速度進行了優化，只不過是提供未縮小的捆綁包

咱們使用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();
//Dog.js
export class Dog{
    constructor(){
        console.info("wow wow");
    }
}

編譯後的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("<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字節，以 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"//指定打開的頁面
}

這樣，一個簡單的webpack4 + ES6的開發環境就搭建完畢。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程