8.6 Webpack

1. webpack

• 模塊打包機

  分析項目結構，找到JavaScript模塊以及其它 的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用

2. 本地安裝webpack webpack-cli

1. 初始化npm

• 建立文件夾(webpack)
• 初始化

npm init //建立package.json
複製代碼

2. 本地安裝

• 指定文件夾下安裝

npm install  webpack -D
    npm install  webpack-cli -D
複製代碼

3. webpack文件夾

• webpack文件夾下新建src(初始)和dist(打包)文件夾
• 新建index.js和index.html
• webpack文件夾下新建webpack.config.js並進行如下配置

const path = require('path');//導入path模塊
    module.exports = {
        //設置開發環境
        mode: 'development',//development開發環境production上線環境
        entry:{//入口文件
            index: './src/index.js'
        },
        output:{//出口文件
            //當前絕對路徑
            path: path.resolve(__dirname,'dist'),
            filename:'[name].js',//與入口文件同名
        }
    }
複製代碼

• pacjage.json進行如下配置

"scripts": {
        "build": "webpack"
      },
複製代碼

3. 服務與熱更新

1. webpack.config.js

//配置webpack開發服務功能 服務與熱更新配置
    devServer: {
        //設置基本目錄功能
        contentBase: path.resolve(__dirname,'dist'),
        //服務器ip，可使用localhost
        host: 'localhost',
        //配置服務端口號
        port: 8088,
        //服務壓縮是否開啓
        compress: true
    },
複製代碼

2. webpack-dev-server

• 安裝webpack-dev-server

npm install webpack-dev-server -D
複製代碼

• package.json

"scripts": {
        "dev": "webpack-dev-server"
    },
複製代碼

• webpack.config.js

//配置webpack開發服務功能
    devServer: {
        //自動打開瀏覽器
        open: true
    },
複製代碼

4. HTML文件打包

1. 單文件

• 安裝html-webpack-plugin

npm install html-webpack-plugin -D
複製代碼

• webpack.config.js

const HtmlPlugin = require('html-webpack-plugin');
    
    plugins: [
            new HtmlPlugin({
                //編譯後文件名稱
                filename: 'test.html',
                //頁面標題
                title: '標題',
                //引入的入口文件
                chunks: ['index'],
                minifiy:{
                    removeAttributeQuotes:true
                    //對html文件進行壓縮，去掉屬性的雙引號
                },
                hash:true,
                template: './src/index.html'
            })
        ]
複製代碼

2. 多頁面打包

plugins: [
        new HtmlPlugin({
            //編譯後文件名稱
            filename: 'test.html',
            //頁面標題
            title: '標題',
            //引入的入口文件
            chunks: ['index'],
            minifiy:{
                removeAttributeQuotes:true
                //對html文件進行壓縮，去掉屬性的雙引號
            },
            hash:true,
            template: './src/index.html'
        })，
         new HtmlPlugin({
            filename: 'test2.html',
            title: '標題2',
            chunks: ['index2'],
            minifiy:{
                removeAttributeQuotes:true
            },
            hash:true,
            template: './src/index2.html'
        })
    ]

複製代碼

3. HTML中的圖片打包

• 安裝html-withimg-loader

npm install html-withimg-loader -D
複製代碼

• webpack.config.js

module:{
        rules: [
            {
                test: /\.(html|htm)$/i,
                loader: 'html-withimg-loader'
            }
        ]
    }
複製代碼

5. js代碼壓縮(目前不須要使用)

• 安裝 uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin -D
複製代碼

• webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    plugins:[
        new UglifyJsPlugin()
    ]
複製代碼

• 基本配置

module.exports = {
        //設置開發環境
        mode: 'production',//development開發環境production上線環境
    },
複製代碼

6. css文件打包與分離

1. 打包

• 入口js文件

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

• 安裝style-loader css-loader

npm install style-loader -D
    npm install css-loader -D
複製代碼

• webpack.config.js

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

2. css分離

• 安裝extract-text-webpack-plugin

npm install extract-text-webpack-plugin@next -D
    //next表示下一個版本
複製代碼

• webpack.config.js

const ExtractTestPlugin = require('extract-text-webpack-plugin');
    
    plugins: [
        new ExtractTestPlugin('css/index.css')
    ]
        
    module:{
        rules: [
            {
                test: /\.css$/,
                use: ExtractTestPlugin.extract({
                    fallback: 'style-loader',
                    use: "css-loader"
                })
            }
        ]
    }
複製代碼

3. CSS中引用 圖片

• 安裝file-loader url-loader

npm install file-loader url-loader -D
複製代碼

• webpack.config.js

module:{
        rules: [
            {
                test: /\.(png|jpg|jpeg|gif)/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 500,
                        //是把小於500B的文件打成Base64的格式，寫入css
                        outputPath:'images/'
                    }
                }]
            }
        ]
    }
複製代碼

4. 路徑問題

• 但若是圖片不是base64而是一個圖片文件，這時候就會出現路徑問題
• webpack.config.js

module.exports = {
        output:{
            publicPath: 'http://localhost:8088/'
        }
    }
複製代碼

7. sass打包和分離

1. 打包

• 安裝node-sass sass-loader

npm install  node-sass sass-loader -D
複製代碼

• 入口js導入scss

import './common.scss';
複製代碼

• webpack.config.js
• css打包到js中

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

2. 分離

module:{
        rules: [
            {
                test: /\.scss$/,
                use: ExtractTestPlugin.extract({
                    fallback: 'style-loader',
                    use: ["css-loader","sass-loader"]
                })
            }
        ]
    }
複製代碼

8. CSS3前綴

• 安裝：postcss-loader autoprefixer

npm install postcss-loader autoprefixer -D
複製代碼

• 新建文件：postcss.config.js

module.exports = {
        plugins: [
            require('autoprefixer')({
                "browsers":[
                    "defaults",
                    "not ie<11",
                    "last 2 versions",
                    ">1%",
                    "iOS 7",
                    "last 3 iOS versions"
                ]
            })
        ]
    };
複製代碼

• webpack.config.js

module:{
        rules: [
            {
                test: /\.css$/,
                use: ExtractTestPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders:  1
                            }
                        },
                        'postcss-loader'
                    ]
                })
            }
        ]
    }
複製代碼

9. 清除未使用的css

• 安裝purifycss-webpack purify-cs

npm install purifycss-webpack purify-css -D
複製代碼

• webpack.config.js

const glob = require('glob');
    const PurifyCSSPlugin = require('purifycss-webpack');
    
    module.exports = {
        plugins: [
            new PurifyCSSPlugin({
            paths: glob.sync(path.join(__dirname,'src/*.html'))
            })
        ]
    };
複製代碼

10. babel

• 安裝babel-core babel-loader @babel/core @babel/preset-env

npm install babel-core babel-loader @babel/core @babel/preset-env -D
複製代碼

• webpack.config.js

module:{
            rules: [
                {
                    test:/\.js$/,
                    use:[
                        {
                            loader:'babel-loader',
                            options:{
                                presets:['@babel/preset-env']
                            }
                        }
                    ],
                    exclude:/node_modules/
                }
            ]
        }
複製代碼

11. 打包註釋

• webpack.config.js

const webpack = require('webpack');
    module.exports = {
        plugins: [
            new webpack.BannerPlugin('不要抄襲！！！'),
        ]
    };
複製代碼

12. 開發環境與生產環境

• devDependencies 存放測試代碼依賴的包或構建工具的包
• dependencies 存放項目或組件代碼中依賴到的
• 安裝所有項目依賴包：npm install
• 安裝生產環境依賴包：npm install --production
• npm install jquery --save

13. 打包第三方類庫

• 安裝jquery

npm install --save jquery
複製代碼

• webpack.config.js

const webpack = require('webpack');
    module.exports = {
        plugins: [
            new webpack.ProvidePlugin({
                $:'jquery'
            })
        ]
    };
複製代碼

14. 資源拷貝

• 安裝 copy-webpack-plugin

npm install copy-webpack-plugin -D
複製代碼

• webpack.config.js

var copyWebpackPlugin = require('copy-webpack-plugin');
    module.exports = {
        plugins: [
            new copyWebpackPlugin([
                {
                    from: __dirname + '/src/public',
                    to:'./public'
                }
            ])
        ]
    };
複製代碼

15. 模塊化配置

• 新建entry_webpack.js

const entry = require("./webpack/entry_webpack.js");
    const entry = {
        entry:'./src/entry.js'
    };
    module.exports = entry;
複製代碼

• webpack.config.js

module.exports = {
        entry: entry,
    }
複製代碼