webpack的基本使用及經常使用的loader配置

webpack是一個前端項目構建工具(打包工具),提供了友好的模塊化支持，以及代碼壓縮混淆、處理 js 兼容問題、性能優化等強大的功能

1. webpack的基本使用

1. 運行 npm install webpack webpack-cli –D 命令，安裝 webpack 相關的包
2. 在項目根目錄中，建立名爲 webpack.config.js 的 webpack 配置文件
3. 在webpack配置文件中,初始化以下代碼

const { join } = require('path') 
module.exports = {
    //mode用來設置構建的模式,參數有兩個:development(開發模式),production(生產模式)
    mode:'development'; 
    //設置打包的入口
    entry:join(__dirname,'./src/index.js');
    //設置打包的出口
    output:{
        //輸出的路徑
        path:join(__dirname,'./dist'); 
        //輸出文件的名字
        filename:'bundle.js'
    }
}
複製代碼

4. 在package.json配置文件的scripts中添加腳本,如:"dev": "webpack",這樣在命令行上運行npm run dev就能夠進行打包了
5. 在html頁面中就能夠經過script標籤進行導入,注意導入的應該是打包後的文件

2. webpack的自動打包

1. 運行npm install webpack-dev-server –D命令,安裝工具
2. 修改scripts腳本中dev命令,改成"dev":"webpack-dev-server"
3. 由於webpack-dev-server命令把文件打包在根目錄,因此在html頁面中須要把導入的路徑改成根目錄,如/bundle.js

3. webpack的預覽頁面

1. 運行npm install html-webpack-plugin –D命令,安裝工具
2. 在webpack.config.js文件中,寫入如下代碼

const HTMLplugin = require("html-webpack-plugin")
    const htmlPlugin = new HTMLplugin({
        template:""  //須要顯示的文件
        filename:"" //指定生成的文件名,該文件不會顯示在目錄中
    })
    // 在導出中添加一個plugins屬性
    module.exports = {
        plugins:[htmlPlugin]
    }
複製代碼

4. webpack配置自動打開瀏覽器

修改scripts腳本中"dev":"webpack-dev-server --open"

5. webpack中打包的規則

6. 打包處理css的loader加載器

1. 運行 npm i style-loader css-loader -D 命令,安裝工具
2. 在webpack.config.js中增長以下的代碼

//test表示匹配的文件類型,use:表示要調用的loader
    //注意loader的調用是從後往前,因此loader的位置不能隨便亂動
    module.exports = {
        module: {
            rules: [
                { test: /\.css$/, use: ['style-loader', 'css-loader'] }
            ]
        }
    }
複製代碼

7. 打包處理less的loader加載器

1. 運行 npm i style-loader css-loader less-loader less -D 命令,安裝工具
2. 在webpack.config.js的rules中添加一條規則:

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
複製代碼

8. 自動添加兼容前綴的loader加載器

1. 運行 npm i postcss-loader autoprefixer -D 命令,安裝工具
2. 在項目的根目錄建立一個postcss.config.js配置文件,並進行一下配置

const autoprefixer = require('autoprefixer') // 導入自動添加前綴的插件
    module.exports = {
        plugins: [ autoprefixer ] // 掛載插件
    }
複製代碼

3. 在webpack.config.js的rules中添加一條規則

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

9. 打包圖片和字體文件的loader加載器

1. 運行 npm i url-loader file-loader -D 命令,安裝工具
2. 在webpack.config.js的rules中添加一條規則

limit 用來指定圖片的大小，單位是字節(byte),若是圖片的大小小於limit，那麼就會被轉爲 base64 圖片
    {
        test: /\.(jpg|png|gif|bmp|ttf|eot|svg|woff|woff2)$/,
        use: 'url-loader?limit=16940'
    }
複製代碼

10. 處理js文件中的高級語法的loader加載器

1. 安裝如下包

//安裝babel轉換器相關的包：
    npm i babel-loader @babel/core @babel/runtime -D
    <!--安裝babel語法插件相關的包:-->
    npm i  @babel/preset-env  @babel/plugin-transform-runtime  @babel/plugin-proposal-class-properties –D 複製代碼

2. 在項目根目錄,建立babel.config.js配置文件,並進行以下配置

module.exports = {
        presets: [ '@babel/preset-env' ],
        plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-
        class-properties’ ]
    }
複製代碼

3. 在webpack.config.js的rules中添加一條規則

// exclude是表示不須要處理裏面的js文件
    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
複製代碼