2. 程式人生 > >Webpack 4.X 從入門到精通

Webpack 4.X 從入門到精通

阿新 • • 發佈：2019-02-17

通過上一篇文章相信大家已經明白了loader的概念。那這篇文章繼續介紹一些常用loader，並展現它的強大之處

處理less

less與sass的功能都一樣，這裡我就以less為例，介紹其對應loader的用法。less的語法對於瀏覽器那是必需不認識的，要處理成瀏覽器認識的需要藉助兩個模組，一個less和一個less-loader

安裝

npm i less less-loader -D

建立檔案

結構目錄如下圖：
圖5-1
index.css內容如下：

#box{
    width: 800px;
    height: 500px;
    border: 5px solid #999
 
;
    color: #00f;
    /*background: green;*/

    background: url(../images/img_01.jpg);
}

index.js內容如下：

import '../css/index.css';  //引入css檔案
import '../less/less.less'; //引入less檔案
import img from '../images/img_01.jpg';

const newImg=new Image();
newImg.onload=()=>document.body.appendChild(newImg);
newImg.src=img;

less.less內容如下

//如果對less不懂的同學，可以加我微信：kaivon
@w:200px;
@border:1px solid #f00;

#box{
    width: @w;
    border: @border;
    ul{
        margin: 0;
        padding: 0;
        list-style: none;

        li{
            height: 30px;
            background: #ccc;

            a{
              color: #f00;
              &:hover{  //&為上一層選擇器
                  color
 
: blue;
              }
            }
        }
    } 
}

template.html內容如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <div id="box">
            <p>我是陳學輝</p>
            <ul>
                <li><a href="#">red</a></li>
                <li><a href="#">green</a></li>
                <li><a href="#">blue</a></li>
            </ul>
        </div>
    </body>
</html>

package.json內容如下：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.4.1",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

webpack.config.js內容如下：

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin=require('mini-css-extract-plugin');

module.exports={
    entry:'./src/js/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'js/index.js'
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'陳學輝',
            template:'./src/template.html',
            filename:'index.html'
        }),
        new MiniCssExtractPlugin({
            filename:'css/index.css'
        }),
    ],
    devServer:{
        host:'localhost',
        port:1573,
        open:true
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../'
                        }
                    },
                    'css-loader',
                ]
            },
            {
                test:/\.less$/,
                use:[   //把less編譯到css檔案裡
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../'
                        }
                    },
                    'css-loader',   //注意順序
                    'less-loader'
                ]
            },
            {
                test:/\.(jpg|png|gif)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:5 * 1024,
                            outputPath:'images'
                        }
                    }
                ]
            }
        ]
    }
}

執行命令npm run dev後瀏覽器裡的內容正常顯示，less檔案裡的程式碼被編譯成真正的css程式碼，同時利用MiniCssExtractPlugin.loader與css一起合併到了index.css檔案裡。

處理ES6與React

ES6的語法大部分已經被各在瀏覽器所支援，當然除了萬惡的IE，但是部分新增API很遺憾並不被瀏覽器所支援：比如內建物件新增的一些方法、Set和Map物件、Generator等。React與Vue都支援一種語法叫JSX，這種語法也是不被瀏覽器所支援的，對於這兩個的處理我選擇用Babel，Babel就是為了處理這哥倆而生的。關於Babel的用法可以參考我錄製的視訊課程“NPM與模組化開發”

ES6

npm i babel-loader babel-core babel-preset-env babel-polyfill -D

  • babel-loader : 處理ES6或者React的loader
  • babel-core : babel執行的核心內容
  • babel-preset-env : 根據程式碼自動選擇版本（ES的版本有很多，env表示會自動選擇版本）
  • babel-polyfill : 用於處理新增的API

React

npm i react react-dom babel-preset-react -D

  • react : react的核心內容
  • react-dom : 處理react裡的dom
  • babel-preset-react : babel處理react的元件

index.js內容如下

import '../css/index.css';
import '../less/less.less';
import img from '../images/img_01.jpg';

import 'babel-polyfill';    //處理ES6新增的API，需要匯入這個模組

import React from 'react';  //react
import ReactDOM from 'react-dom';   //react

const newImg=new Image();
newImg.onload=()=>{
    document.body.appendChild(newImg);
};
newImg.src=img;


//ES6
const fn=()=>console.log(123);

//map物件
const map=new Map();
map.set('name','kaivon');
console.log(map);

//Array.from方法
const strArr=Array.from('kaivon');
console.log(strArr);

//Object.assign方法
const t1={a:1};
Object.assign(t1,{b:2},{c:3});
console.log(t1);

//generator
function* bear(){
    console.log('熊大');
    console.log('熊二');
}
bear().next();


//react
ReactDOM.render(
    <h2>這是JSX語法</h2>,
    document.getElementById('box')
);

webpack.config.js內容如下：

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin=require('mini-css-extract-plugin');

module.exports={
    entry:'./src/js/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'js/index.js'
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'陳學輝',
            template:'./src/template.html',
            filename:'index.html'
        }),
        new MiniCssExtractPlugin({
            filename:'css/index.css'
        }),
    ],
    devServer:{
        host:'localhost',
        port:1573,
        open:true
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../'
                        }
                    },
                    'css-loader',
                ]
            },
            {
                test:/\.less$/,
                use:[   //把less編譯到css檔案裡
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../'
                        }
                    },
                    'css-loader',   //注意順序
                    'less-loader'
                ]
            },
            {
                test:/\.(jpg|png|gif)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:5 * 1024,
                            outputPath:'images'
                        }
                    }
                ]
            },
            {
                test:/\.js$/,
                use:[
                    {
                        loader:'babel-loader',
                        options:{   //env針對的是ES的版本，它會自動選擇。react針對的就是react
                            presets: ['env','react']
                        }
                    }
                ],
                //exclude: /node_modules/,  //不去檢查node_modules裡的內容，那裡的js太多了，會非常慢
                include:path.resolve(__dirname,'src/js'),   //直接規定查詢的範圍
            }
        ]
    }
}

執行命令npm run build後，把檔案在IE裡面開啟看看，也是Ok的~

注意：如果用過babel的同學可能知道還需要建立一個.babelrc的檔案，那裡面還要寫一個物件。但是在這裡卻不需要，是因為babel-loader的options裡已經把內容添上了，就不需要建立檔案了

相關推薦

Webpack 4.X 從入門到精通 - entry與output（一）

需要 不可 程序猿 導致 import 應用 驗證 解決 doctype 回顧歷史 Web應用日益復雜，前端開發也發生了翻天覆地的變化變得盤根錯節，到今天已經非常復雜和龐大了！用html、css、javascript老老實實的寫個頁面的時代早已過去。而現在要完成工作需要借助

Webpack 4.X 從入門到精通 - plugin（二）

-h 打包 不同 .com aca spa 編譯 option tput 通過上一篇文章，我們明白了webpack的兩個配置參數入口與出口，webpack會找到入口文件的地址，進去後一頓蹂躪，再通過你給的輸出地址就把編譯後的文件給你了。這篇文章接著去豐富webpack.co

Webpack 4.X 從入門到精通 - devServer與mode（三）

安裝使用 clas 情況下 屬性 端口 屬性。 npm demo title 上一篇文章裏詳細介紹了一下插件的用法，這一篇文章接著豐富module.exports裏的屬性。如今的前端發展已經非常迅速了，伴隨而來的是開發模式的轉變。現在已經不再是寫個靜態頁面並放在瀏覽器裏打開

Webpack 4.X 從入門到精通 - 第三方庫（六）

ofo 分享 ctype mod 找到 ebp 問題 title 效率 在開發的時候會時常用到第三方的庫或者框架，比如耳熟能詳的jquery。借助它們能提高開發效率，但是如何在webpack中使用呢。這篇文章介紹兩個東西，如何使用第三方庫以及如何提取第三方庫。 使用第三方庫

Webpack 4.X 從入門到精通

通過上一篇文章相信大家已經明白了loader的概念。那這篇文章繼續介紹一些常用loader，並展現它的強大之處 處理less less與sass的功能都一樣，這裡我就以less為例，介紹其對應loader的用法。less的語法對於瀏覽器那是必需不認識的，

webpack 4.x 從零開始初始化一個vue專案

建立目錄 專案名稱: vue-init app css reset.sass js home index.vue router index.js main.js App.vue views index.html 安裝webpack npm i -D webpack 建立配置檔案 w

unity 5.x從入門到精通 讀書筆記（一）

transform 場景 engine class 遊戲 iou 遊戲制作 初始化 bsp 《unity 5.x從入門到精通》前四章是一些Unity的情況介紹，第五章開始介紹Unity的基礎操作，第六章通過一個3D場景的實現介紹了3D遊戲制作模式的基本操作。

Cocos2d-x從入門到精通第11課《錨點概念的理解》

       下面我們通過兩個例子來理解一下錨點的概念和使用。         首先我們通過對sprite(火雲開發課堂的LOGO)進行旋轉，在不同的錨點設定下的效果顯示來認識一下錨點的不同帶來的不同效果。          在進行旋轉之前我們先來看一下，未旋轉之前sprite(火雲開發課堂的LOGO)

webpack 4.X 與 Vue 2.X結合

itcast tin tps resource depend hot develop desc rom # Vue.js ## 註意： 有時候使用`npm i node-sass -D`裝不上，這時候，就必須使用 `cnpm i node-sass -D` ## 在普通頁面

webpack 4.x 初級學習記錄

但是 模式 基本概念 寫入 dex www 命令 output 參數 目錄 webpack 4.x 安裝 webpack 4.x 基本打包編譯 webpack 配置 概念 webpack-dev-server 安裝 基本概念 配置webpack.config.js 配

webpack 4.x 解決 webpack-dev-server工具在webpack構建的專案中使用問題

首先將webpack-dev-server安裝到專案中 npm install webpack-dev-server -D 這時在powershell中敲 webpack-dev-server 會發現 'webpack-dev-server' 不是內部或外部命令，也不是可執行的程式 或批

webpack 4.x 解決 webpack-dev-server工具在webpack構建的項目中使用問題

運行 shel pts class col png 技術 style 發現 首先將webpack-dev-server安裝到項目中 npm install webpack-dev-server -D 這時在powershell中敲 webpack-dev-server

webpack 4.x一起學習（二）

接著上一塊https://juejin.im/post/5be29710e51d457e90193cf3 模組：CSS檔案打包 Webpack在生產環境中有一個重要的作用就是減少http的請求數，就是把多個檔案打包到一個js裡，這樣請求數就可以減少好多。在學習CSS打包

webpack 4.x一起學習（一）

最近在學習webpack第四個版本，相比大改版肯定有諸多不同，這邊進行重新學習順便排排BUG 安裝過程中難免有點慢，但是npm是慢 cnpm又可能出錯 npm install -g chajian --registry=http://registry.npm.taobao.org 推薦此

Webpack 4.X webpack.config.js 檔案配置（一）

通過上一篇文章，我們明白了webpack的兩個配置引數入口與出口，webpack會找到入口檔案的地址，進去後一頓蹂躪，再通過你給的輸出地址就把編譯後的檔案給你了。這篇文章接著去豐富webpack.config.js的內容，說一個引數叫plugins plugins plugins裡面放的是外掛，在webp

mybatis-3.4.x 從原始碼看快取的使用[筆記三]

從原始碼看mybatis快取 簡單看下SqlSession的建立 //DefaultSqlSessionFactory.java private SqlSession openSessionFromDataSource(ExecutorType

Webpack 4.x搭建Vue腳手架踩坑記錄

博主最近在自己搭建一個vue的腳手架，因為感覺之前直接使用官方vue-cli之後，對於Webpack的使用不太熟悉，加上vue-cli3.0版本把webpack.config.js配置檔案置換成自己的配置檔案了之後，對於Webpack的使用就更加不熟練了。這裡總

【視訊分享】Angular 4.0從入門到實戰 打造股票管理網站

為了讓你更好的理解Angular的新特性，講師精心設計一個單頁應用（SPA）－股票管理網站，將A

SpringMVC(4.x) 從搭建到放棄(含原始碼分析)——一

1. Spring MVC處理流程 DispatcherServlet -> 處理器對映 -(找到處理器)-> DispatcherServlet -> 控制器 -(邏輯檢視名+Model)-> DispatcherServlet -

-Angular 4.0從入門到實戰 打造線上競拍網站-

這個視訊資源應該是我目前看到的比較全面完整的關於angular的視訊，學習還是挺不錯的，下列是課程目錄列表：第1章準備好了嗎,那就開始吧!!!在這一章裡,我們首先會對整個課程的內容做一個簡要的介紹,包括章節的安排,實戰幸例的介紹以及前置知識的介紹等內容。然後我們會從一個比較高