入門Webpack4.x詳解，閱讀這篇就夠了

時間  2020-02-21
標籤 入門 webpack4.x webpack 詳解 閱讀 夠了 简体版
原文   原文鏈接

前言

webpack是當下最熱門的前端資源模塊化管理和打包工具，它能夠將許多鬆散的模塊按照依賴和規則打包成符號生產環境部署的前端資源，還能夠將按需加載的模塊進行代碼分割。本篇將介紹webpack的配置、配置Html模板、引入CSS文件等 css

什麼是webpack?

webpack能夠看作是模擬打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其餘的一些瀏覽器不能直接運行的拓展語言(Scss，TypeScript等)，並將其打包爲合適的格式以供瀏覽器使用html

webpack能夠作哪些事？

  • 代碼的轉換(好比把es6轉換成es5，把less轉換成sass)
  • 文件優化(好比在打包的過程當中，壓縮代碼體積，合併文件等)
  • 代碼分割(好比在開發多頁面的時候，公共頁面的抽離，路由懶加載的功能)
  • 模塊合併(好比把多個模塊合併成一個模塊)
  • 自動刷新(幫咱們啓動一個本地服務，來實現代碼變動後能夠更新咱們的頁面)
  • 代碼效驗(校驗咱們的代碼是否符合規範)
  • 自動發佈(打包完成後能夠實現一個自動完成的功能，把打包後的代碼發佈到服務器上)

webpack的基礎配置

桌面建webpack文件夾

mkdir webpack
複製代碼

初始化項目

yarn init -y
複製代碼

初始化項目就生成了package.json文件前端

安裝依賴

yarn add webpack webpack-cli -D
複製代碼

啓動devServer須要安裝一下webpack-dev-servervue

yarn add webpack-dev-server -D
複製代碼

新建src文件夾

mkdir src
複製代碼

src裏新建index.js文件

touch index.js
複製代碼

webpack能夠進行零配置

  • 打包工具，把JS模塊進行打包而後輸出
  • 打包支持JS的模塊化

在使用webpack進行打包的時候，默認狀況下會將src下的入口文件index.js進行打包node

在不設置mode的狀況下，打包出來的文件自動壓縮webpack

npx webpack
複製代碼

設置mode爲開發模式，打包後的文件不被壓縮es6

npx webpack --mode development
複製代碼

注：web

  • node v8.2版本之後都會有一個npx
  • npx會執行bin裏面的文件

當執行npx webpack命令的時候，webpack會自動查找項目中src目錄下的index.js文件，而後進行打包，生成一個dist目錄並存在一個打包好的main.js文件npm

生成目錄

配置webpack.config.js

新建webpack.config.js文件

在webpack項目下新建一個webpack.config.js文件json

異步默認配置文件的名字是webpack.config.js

//webpack是node寫出來的node的寫法
let path = require('path')
module.exports = {
    mode: 'development',//模式 默認兩種 production development開發模式
    entry: './src/index.js',//入口文件
    output:{
        filename:'bundle.js',//打包後的文件名
        path: path.resolve('dist')//路徑必須是一個絕對路徑,當前目錄下產生一個dist目錄
    }
}
複製代碼

打包後項目目錄

配置腳本

若是以爲命名太長了，就到package.json裏面配置一些腳本

"scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
  },
複製代碼

這裏的--config指的是添加配置文件，webpack.config.js文件名

執行npm run build就是咱們打包後的文件，這是生產環境下、上線須要的文件

執行npm run dev 是咱們開發環境下的文件

配置入口文件的類型

單入口和單出口

entry:'./src/index.js'
複製代碼

多入口和單出口

有的時候咱們有多個頁面，就須要使用多個出口

entry:['./src/index.js','./src/other.js']
複製代碼

多入口和多出口

//webpack是node寫出來的node的寫法
let path = require('path');

module.exports = {
    entry: {
        index: './src/index.js',
        other:'./src/other.js'
    },
    output:{
        filename: '[name].js',
        path: path.resolve('dist')
    },
}
複製代碼

這個時候npm run build，就會看到兩個打包好的JS文件

配置HTML模板

安裝插件

yarn add html-webpack-plugin -D
複製代碼

新建index.html

在src目錄下邊新建一個index.html文件

touch index.html
複製代碼

單頁面開發

再webpack.config.js裏面引用

//webpack是node寫出來的node的寫法
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',//入口文件
    output: {
        // 添加hash能夠防止文件緩存，每次都會生成4位的hash串
        filename: 'bundle.[hash:4].js',   
        path: path.resolve('dist')
    },
    plugins: [
        // 經過new一下這個類來使用插件
        new HtmlWebpackPlugin({
            // 在src目錄下建立一個index.html
            template: './src/index.html',
            hash: true, // 會在打包好的bundle.js後面加上hash串
        })
    ]
}
複製代碼

執行

接着npm run build執行一下

打包後自動引入JS

多頁面開發

開發的時候有時候不止一個頁面，會要配置多個頁面

咱們把以前的dist目錄刪掉

再webpack.config.js裏面引用

//webpack是node寫出來的node的寫法
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 多頁面開發，怎麼配置多頁面
    entry: {
        index: './src/index.js',
        other: './src/other.js'
    },
    // 出口文件  
    output: {                       
        filename: '[name].js',
        path: path.resolve('dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',   
            filename: 'index.html',
            chunks: ['index']   // 對應關係,index.js對應的是index.html
        }),
        new HtmlWebpackPlugin({
            template: './src/other.html',
            filename: 'other.html',
            chunks: ['other']   // 對應關係,login.js對應的是login.html
        })
    ]
}
複製代碼

執行

接着npm run build執行一下，就會看到dist目錄下邊多了兩個文件

配置CSS模塊

安裝

yarn add style-loader css-loader -D

yarn add less less-loader -D
複製代碼

新建文件

  • 在src目錄下 新建一個style.css文件
  • 在src目錄下 新建一個style.less文件

src/index.js

import './style.css'; 
import './style.less'; 
複製代碼

webpack.config.js

//webpack是node寫出來的node的寫法
let path = require('path');

// webpack.config.js
module.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve('dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,     // 解析css
                use: ['style-loader', 'css-loader'] // 從右向左解析
            }
        ]
    }
}
複製代碼

接着npm run build執行一下

執行後目錄截圖

拆分單個CSS

安裝

yarn add mini-css-extract-plugin -D
複製代碼

新建文件

  • src文件下邊新建css文件和less文件
  • css文件下邊新建style.css文件
  • less文件下邊新建style.less文件

index.js

import './css/style.css'; 
import './less/style.less'; 
複製代碼

webpack.config.js

let MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/ming.css'
        })
    ]
}
複製代碼

執行後目錄截圖

拆分多個css

index.js

import './css/style.css'; 
import './css/reset.less'; 
複製代碼

webpack.config,js

let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
let styleLess = new ExtractTextWebpackPlugin('css/style.css');
let resetCss = new ExtractTextWebpackPlugin('css/reset.css');

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: resetCss.extract({
                    use: 'css-loader'
                })
            },
            {
                test: /\.less$/,
                use: styleLess.extract({
                    use: 'css-loader'
                })
            }
        ]
    },
    plugins: [
        styleLess,
        resetCss
    ]
}
複製代碼

執行後目錄截圖

引入圖片打包

安裝

yarn add file-loader url-loader -D
複製代碼

file-loader默認會在內部生成一張圖片 到build目錄下 url-loader是經過base64編碼的方法來展現圖片

JS建立圖片引入

src/index.js

import logo from './logo.jpg'//把圖片引入，返回的結果是一個新的圖片地址
let image = new Image();
image.src = './logo.jpg'//就是一個普通的字符串
document.body.appendChild(image);
複製代碼

webpack.config.js

{
    test:/\.(jpg|png|gif|svg)$/,
    use:'url-loader',
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
  }
複製代碼

頁面img引用圖片

安裝

yarn add html-withimg-loader -D
複製代碼

src/index.css

div{
    width: 952px;height: 249px;
    background: url("./logo.jpg")
}
複製代碼

src/index.js

import './index.css'
複製代碼

webpack.config.js

rules:[
            {
                test: /\.(png|jpg|gif)$/,
                use: 'file-loader'
            },
    ]
複製代碼

引入字體圖片和svg圖片

webpack.config.js

rules:[
            {
                test: /\.(png|jpg|gif)$/,
                //作一個限制，當咱們的圖片，小於多少k的生活，用base64來轉化
                //不然用file-loader產生真實圖片
                use: 'url-loader',
                options:{
                	limit: 200*1024
                }
            },
       ]
複製代碼

src/index.js

<img src="./logo.jpg" alt="">
複製代碼

添加CSS3屬性前綴

爲了瀏覽器的兼容性，有時候咱們必須加上一些前綴

安裝

yarn add postcss-loader autoprefixer -D
複製代碼

建立postcss.config.js文件

module.exports = {
    plugins: [require('autoprefixer')]  // 引用該插件
}
複製代碼

webpack.config.js配置

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            }
        ]
    }
}
複製代碼

轉成es6語法

Babel會將ES6的代碼轉成ES5的代碼

安裝

yarn add babel-core babel-loader babel-preset-env babel-preset-stage-0 -D
複製代碼

webpack.config.js

module.exports ={
    module:{
        rules:[
        {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{//用babel-loader 須要把es6轉換成es5
                        presets:[
                            '@babel/preset-env'
                        ]
                    }
                }
            },
        }
    }
複製代碼

服務器配置

webpack.config.js裏添加

devServer: {//開發服務器的配置
        host: 'localhost', //默認是localhost
        port: 3000,//端口
        progress: true,//但願在內存中打包看到一個進度條
        contentBase:'./build',//但願./build目錄做爲靜態目錄
        compress: true
    },
複製代碼

配置source-map

webpack.config.js添加

源碼調試，會單獨生成一個sourcemap文件 出錯了 表示 當前報錯的列和行

devtool: 'source-map'   //添加映射文件，能夠幫咱們調試源代碼
複製代碼

不會參數單獨的文件，可是能夠顯示行和列

devtool:'eval-source-map',
複製代碼

不會參數列，可是是一個單獨的映射文件

devtool: 'cheap-module-source-map' //產生後你能夠保留起來
複製代碼

不會產生文件，集成在打包後的文件中，不會參數列

devtool:'cheap-module-eval-source-map'
複製代碼

打包前清除輸出目錄

安裝

yarn add clean-webpack-plugin -D
複製代碼

webpack.config.js添加

let CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    plugins: [
        new CleanWebpackPlugin('dist')  
    ]
}
複製代碼

熱更新

之前每次頁面更新都要從新更新，熱更新是隻更新某個部分

代碼編寫

devServer:{
	hot: true,
}

plugins:[
	//熱更新插件
  new webpack.NamedModulesPlugin(),//打印更新的模塊路徑
  new webpack.HotModuleReplacementPlugin() //熱更新插件
]
複製代碼

resolve屬性的配置

resolve經常使用來配置別名和省略後綴名

代碼編寫

resolve:{//解析 第三方包
        modules:[path.resolve('node_modules')],
        extensions:['.js','.css','.json','.vue'],
        
        mainFiles:[],//入口文件的名字index.js
            alias:{//別名
             bootstrap:'bootstrap/dist/css/bootstrap.css'
        }
    },
複製代碼

抽離公共代碼

在多個頁面中抽取頁面的代碼

代碼編寫

module.exports = {
    //優化
    optimization:{
        splitChunks:{
            //分離代碼塊
            cacheGroups:{
                //緩存組
                common:{
                    //公共的模塊
                    chunks: 'initial',
                    minSize:0,
                    minChunks:2,
                },
                vendor:{
                    priority:1,
                    test:/node_modules/,//把你抽離出來
                    chunks: 'initial',
                    minSize: 0,
                    minChunks: 2,
                }
            }
        }
    },
}
複製代碼

webpack自帶優化

  • import 在生產環境下 會自動去除掉沒用的代碼

  • tree-shaking 把沒用的代碼 自動刪除掉

  • es6模塊會把結果放在defalut上

  • scope hosting做用域提高

最後

歡迎你們加入，一塊兒學習前端，共同進步！

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