學習筆記之webpack4+scss+babel+第三方庫配置

原創 皆凡人 2020-06-15 13:27

剛自學完一些webpack，總結一下筆記，並製作一個我要用的webpack-starter

主要配置：webpack4+scss+babel+bootstrap+jquery+fontawesome 

 

一、基礎知識瞭解

（一）前端工程化——構建工具的選型介紹：

中文版：《前端工程化——構建工具選型：grunt、gulp、webpack》

上文英文版：GULP VS GRUNT VS WEBPACK: COMPARISON OF BUILD TOOLS / TASK RUNNERS

 

（二）webpack官方文檔，寫得非常不易懂：

中文版：webpack中文文檔

英文版：webpack英文文檔

 

（三）推薦參考：關於webpack入門的網友寫的一些不錯的教程

《Webpack 4.X 從入門到精通》系列，點進作者文章詳情可查看其餘文章

《Webpack 4.X 從入門到放肆》

《入門 Webpack，看這篇就夠了》

 

二、安裝webpack

因爲安裝到全局環境下可能導致有的插件無法使用，以及不同的項目依賴的版本不同而出現問題，我選擇安裝到當前項目中。如果你使用的是webstorm，點擊terminal在那裏輸入命令行即可。

 

1. 自動生成package.json文件，-y設置爲默認值

npm init -y

2. 安裝webpack文件及其cli，--save-dev簡寫爲-D

npm install -D webpack webpack-cli

 

三、配置文件

此項目文件分佈如下，不需要先提前建立，只是後面配置時路徑有些多，所以先展示一下：

（一）設置出入口文件

1. 新建配置文件webpack.config.js，將其放在項目文件夾的根目錄下，設置entry：入口文件和output出口文件。【建議瞭解一下出入口文件的概念。】

const path=require('path'); //node.js的語法，引入路徑模塊，爲了輸出的時候找絕對路徑

module.exports = {
    entry: [
        './src/index.js', //入口文件爲index.js,將其放在入口文件夾src中
    ],
    output: {
        path: path.resolve(__dirname, './dist/'), // path.resolve爲node.js的固定語法，用於找到當前文件的絕對路徑
        filename: 'js/index.bundle.js'// 輸出的文件爲index.bundle.js，將其放在出口文件夾dist的js文件夾中
    }
};

 

2. 創建入口文件src/index.js，出口文件創建與否都行，因爲運行命令後會自動生成

 

3. 創建一個部分js文件src/js/main.js，導入到入口文件index.js中。

main.js

const show =(content)=>{
    const divBox = document.getElementById("divBox");
    divBox.innerHTML = `Hello, ${content}`;
};

export { show };

index.js

import {show} from './js/main';    //ES6導入模塊的語法，ES6裏導入的模塊爲js話不需要加後綴名
show('World');

4. 創建dist/html/test.html，用於查看打包好的js效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="divBox"></div>

</body>
<script src="../js/index.bundle.js"></script>
</html>

 

（二）配置模式

在package.json裏配置production(生產) 和 development(開發) 模式。 【建議瞭解一下這兩種模式的區別。】

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

此時運行npm run build或npm run dev，或者點擊webstorm裏這兩行代碼前的啓動標誌，會自動生成出口文件dist/js/index.bundle.js

運行test.html生成如下結果：

 

（三）構建本地服務器

1．安裝webpack-dev-server

npm install -D webpack-dev-server

 

2．配置文件webpack.config.js

devServer:{
    contentBase: "./dist/html",// 本地服務器所加載的頁面所在的目錄
    historyApiFallback: true, // 不跳轉
    inline: true, // 實時刷新
    port:8083,    //端口
}

 

3．配置package.json文件

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production",
  "server": "webpack-dev-server --open"
},

此時運行npm run server則自動打開窗口。

 

（四）生成Source Maps

source maps提供了一種對應編譯文件和源文件的方法，使得編譯後的代碼可讀性更高，也更容易調試。【建議看一下devtool的配置選項】

對webpack.config.js進行配置。

module.exports = {

    devtool: 'source-map',

    .....

};

 

（五）熱更新

用於局部更新有改動的模塊

const webpack=require('webpack');



module.exports = {

    ......

    devServer:{

    ......

        hot:true,    //開啓熱更新
    },

    plugins:[
        new webpack.HotModuleReplacementPlugin()    //引入熱更新插件
    ]
};

 

四、配置plugin

（一）html-webpack-plugin

用於根據所給配置自動生成html頁面。

 

1．安裝

npm install -D html-webpack-plugin

 

2．webpack.config.js配置

......
const HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports = {

    ......

    plugins:[

    ......

        new HtmlWebpackPlugin({
            title:'Title',    // 這個值對應html裏的title
            template:'./src/html/template.html',    //模板文件地址
            filename:'../dist/html/index.html',    //文件名，默認爲index.html（路徑相對於index.js的值）
            inject:true,    //script標籤的位置，true/body爲在</body>標籤前，head爲在<head>裏，false表示頁面不引入js文件
            hash:true,    //是否爲引入的js文件添加hash值
        }),
    ]
};

 

3．創建模板文件src/html/template.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!--這是個模板文件，title裏的語法是爲了能解析配置參數裏title對應的值-->
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>

<body>

<div id="divBox">template</div>

</body>
</html>

 

（二）mini-css-extract-plugin

用於將 CSS 提取到一個文件中

 

1．安裝該插件和 css-loader

npm i -D mini-css-extract-plugin css-loader

 

2．webpack.config.js配置

......
const  MiniCssExtractPlugin  =  require("mini-css-extract-plugin");

module.exports = {
        ......
plugins:[
        ......
    new  MiniCssExtractPlugin({
        filename:  "./css/style.css", //路徑相對於output.path，將其安裝到dist/css文件夾中
        chunkFilename:  "./css/[id].css",
        publicPath:'../'
    }),
    ],
    module:  {
        rules:  [
            {
                test:  /\.css$/,
                use:  [MiniCssExtractPlugin.loader,  "css-loader"]
            }
        ]
    },
};

 

3．驗證

（1）創建src/css/style.css用於測試

*{
    color:#fff;
    text-align: center;
}
body{
    background-color: black;
}

（2）在入口文件index.js中導入 CSS：

import "./css/style.css";

（3）運行結果

dist/html/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!--這是個模板文件，title裏的語法是爲了能解析配置參數裏title對應的值-->
    <title>Title</title>
<link href="../../dist/css/main.css?ecb52c9dbb217c48a6c6" rel="stylesheet"></head>

<body>

<div id="divBox">template</div>

<script type="text/javascript" src="../js/index.bundle.js?ecb52c9dbb217c48a6c6"></script></body>
</html>

網頁結果：

 

五、配置module

 

（一）babel

1．安裝

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

npm i -D babel-loader @babel/core @babel/preset-env

 

2．配置module

module:  {
    rules:  [
        ......
        {
            test: /(\.js)$/,
            use: {
                loader: "babel-loader",
                options: {
                    "presets": [
                        "@babel/preset-env"
                    ]
                }
            },
            exclude: /node_modules/
        },
    ]
},

 

3．驗證：運行查看index.bundle.js編譯結果

 

（二）scss

 

1．安裝

(1) 首先安裝postcss-loader 和 autoprefixer（自動添加前綴的插件）

npm i -D postcss-loader autoprefixer

(2) 其次安裝node-sass和sass-loader

npm i -D node-sass sass-loader

 

2．配置webpack.config.js，此時可以將初配置css的rules替換掉了

module.exports = {
.......
    module:  {
        rules:  [
            {
                test: /\.(css|sass|scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [
                                require('autoprefixer')
                            ],
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ],
                exclude: /node_modules/,
            },
            ......
        ]
    },
};

 

3．驗證

（1）建立文件src/css/scss/main.scss

$my-favorite-color: #fff000;

@mixin text-setting(){
  color:#fff;
  text-align: center;
};

*{
  @include text-setting;
}

body{
  background-color: black;
}

.style-scss-test{
  color: $my-favorite-color;
  &:hover{
    transform: scaleX(3);
  }
}

（2）將其導入到主樣式文件style.scss中

@import "scss/main";

（3）index.js導入

import style from './css/style.scss';

（4）在template.html加入

<div class="style-scss-test">style-scss-test</div>

（5）運行結果

①　生成文件dist/css/style.css，已編譯成css文件並加入前綴

* {
  color: #fff;
  text-align: center; }

body {
  background-color: black; }

.style-scss-test {
  color: #fff000; }
  .style-scss-test:hover {
    -webkit-transform: scaleX(3);
            transform: scaleX(3); }

②　網頁顯示結果：

 

（三）圖片處理

1．安裝

npm i -D file-loader url-loader html-loader

 

2．配置webpack.config.js

module:  {
    rules:  [
    .......
        {
            test: /\.(html)$/,
            loader: 'html-loader',
            exclude: /node_modules/,
            options: {
                attrs: ['img:src', 'link:href'],
                name: '[name].[ext]'
            }
        },
        {
            test: /\.(jpe?g|png|gif|svg)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    // 30KB 以下的文件採用 url-loader
                    limit: 1024 * 30,
                    // 否則採用 file-loader，默認值就是 file-loader
                    fallback: 'file-loader',
                    name: '[name].[ext]',
                    outputPath: './images/',
                    publicPath:'../images/'
                }
            }]
        }
    ]
},

3．驗證

（1）修改template.html，添加：

<div class="image-test">
    <span>image-test:</span>
    <span><img src="../images/aoi.jpg" alt="aoi"></span>
</div>

（2）修改main.scss

html{
  background-image: url("../images/bg.png"); // 這裏是要導入到style.scss 文件中的，所以路徑以style.scss文件爲標準
}

body{
  background-color: rgba(0,0,0,.4);
}

（3）網頁顯示結果：

 

六、配置第三方庫

 

（一）jquery

1．安裝

npm i -D jquery

 

2．使用ProvidePlugin自動加載模塊，而不必到處 import 或 require

plugins:[
.......
    new webpack.ProvidePlugin({    //它是一個插件，所以需要按插件的用法new一個
        $:'jquery',    //接收名字:模塊名
        jQuery: 'jquery'
    }),
],

3．驗證

（1）在index.js裏使用

$('.jquery-test').css('color','red');

（2）修改template.html，添加

<div class="jquery-test">jquery-test</div>

（3）運行結果

 

（二）bootstrap

參考文檔：Learn how to include Bootstrap in your project using Webpack

參考視頻：Customize Bootstrap 4 with Webpack | Webpack tutorials （這個視頻說得很不錯，還說了一些改變變量之類的）

 

1．安裝

npm i -D bootstrap popper.js

 

2．導入js文件

導入到index.js文件，我這裏新建了一個src/js/bootstrap_part.js文件放需要的bootstrap插件，也可以直接導入

 

bootstrap_part.js

// 導入Bootstrap 4 部分需要的插件，也可以使用 import 'bootstrap'; 導入所有
import 'bootstrap/js/dist/util'
import 'bootstrap/js/dist/alert'
import 'bootstrap/js/dist/button'
import 'bootstrap/js/dist/dropdown'
import 'bootstrap/js/dist/modal'
import 'bootstrap/js/dist/tab'
import 'bootstrap/js/dist/tooltip'

index.js

import './js/bootstrap_part.js'

 

3．導入scss

導入到style.scss文件，我這裏新建了一個src/css/scss/bootstrap_part.scss文件放需要的bootstrap插件，也可以直接導入

 

bootstrap_part.scss

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/alert";

style.scss

@import "scss/bootstrap_part";

 

4．查看效果

（1）修改template.html

<div class="container">
    <div id="divBox">template</div>

    <div class="style-scss-test">style-scss-test</div>

    <div class="image-test">
        <span>image-test:</span>
        <span><img src="../images/aoi.jpg" alt="aoi"></span>
    </div>

    <div class="jquery-test">jquery-test</div>

    <button class="btn alert-primary">bootstrap-test</button>
</div>

（2）效果如下：

 

（三）font-awesome

1．安裝

npm i -D @fortawesome/fontawesome-free

 

2．導入js文件，還有另一種方式是導入scss和loader字體的，但這個操作簡單一些

導入到index.js文件，我這裏新建了一個src/js/font-awesome_part.js文件放需要的font-awesome插件，也可以直接導入

 

font-awesome_part.js

// Font Awesome 5 (Free)
import '@fortawesome/fontawesome-free/js/fontawesome';
import '@fortawesome/fontawesome-free/js/solid';
import '@fortawesome/fontawesome-free/js/regular';
import '@fortawesome/fontawesome-free/js/brands';

index.js

import './js/font-awesome_part'

3．驗證

（1）修改template.html

<button class="btn"><i class="fas fa-check-square"></i></button>

（2）網頁效果：

 

此項目源代碼，點擊跳轉獲取

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Rollup 入門

杨码农 2018-11-04 04:53:04