30分鐘快速瞭解webpack

前言——webpack如今已成爲前端自動化、模塊化不可或缺的一款工具，咱們能夠把它看作是一種模塊打包機，它來分析你的項目結構、找到JS模塊以及一些瀏覽器不能直接運行的拓展語言（如SASS、LESS等），而後將其打包爲合適的格式供瀏覽器使用......

首先要確保你的計算機安裝了nodeJS而後咱們就能夠開始咱們的webpack之路了~~~先來按照以下步驟建立個項目吧：

1. 初始化package.json文件

npm init -y
複製代碼

2. 下載webpack,在4.0版本須要下載兩個包webpack和webpack-cli(-D的意思是開發環境依賴)

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

3. 這裏插一句，在下面的步驟中童鞋們不要忘記install依賴的模塊和插件哦！
4. 建立一個webpack配置文件webpack.config.js

const path = require('path');
module.exports = {
    entry:'',
    output:{

    },
    module:{

    },
    plugins:{

    },
    devServer:{
        
    }
}
複製代碼

這裏先說下幾個核心的配置

• entry：入口；這是使用webpack的第一步，定義一個入口文件，至關於輸入（單個或多個）
• output:出口；也就是打包後文件輸出到哪裏，能夠是定義一個文件也能夠定義一個目錄；path：定義一個路徑（絕對路徑） filename:打包後的文件名；假如是多個入口文件咱們應該這樣寫：filename:'[name].[hash].js'

entry:'../main.js',
output:{
    path:path.join(__dirname,'../dist'),
    filename:'bundle.js'
},
複製代碼

• loader：模塊轉換器；來把之前的模塊內容轉換爲新的JS內容靠的就是loader
• module：在這裏配置模塊規則，webpack打包模塊靠的就是這裏定義的模塊規則,咱們在module中配置一些規則rules，這裏暫且以轉換CSS文件爲例：

(1) test:這裏是一個正則用於匹配轉換的文件(這裏是以.css後綴結尾的文件)

(2) loader:若是你只須要一個loader來處理那麼就傳一個字符串，若是有多個則寫一個數組（這裏須要兩個css-loader解析css裏的路徑如背景圖路徑等等，style-loader用來把css文件內容變爲style標籤並插入）轉換的時候是按數組從右往左去轉換的。

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

• plugins：插件；webpack打包會有各類各樣的事件，經過註冊插件來處理這些事件，在構建流程中的特定時機注入擴展邏輯來作一些事情。這裏咱們以html-webpack-plugin這個插件爲例，用它來根據模板來生成html文件到目標目錄下,在配置前不要忘記安裝這個插件,同時也不要忘記require這個插件！

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

使用的時候使用new關鍵字，同時能夠傳遞參數 (1)template:指定產出的html模板

(2)filename:產出html文件名

(3)hash:在引入的JS文件加入查詢字符串避免緩存

(4)minify:壓縮

咱們也能夠按需引入其餘的變量參數

plugins:[
    new HtmlWebpackPlugin({
        template:'./src/index.html',
        filename:'index.html',
        title:'入門webpack',
        hash:true,
        minify:{
            removeAttributeQuotes:true
        }
    })
]
複製代碼

• devServer：開發服務器，這裏咱們來配置下開發服務器用來預覽打包後的項目:首先找到package.json添加一個腳本,在scripts下添加

"dev":"webpack-dev-server --open --mode development"
複製代碼

這樣咱們就可使用npm run dev來啓動項目了,咱們還須要在webpack.config.js中的devServer中來配置:

(1) contentBase:配置靜態文件根目錄，也就是你打包後的目錄 (2) host:主機(這裏使用localhost) (3) port:端口(默認8080) (4) compress:服務器返回瀏覽器是否使用gzip壓縮(布爾值)

devServer:{
    contentBase:'../dist',
    host:'localhost',
    port:'8080',
    compress:true
}
複製代碼

在使用webpack-dev-server啓動服務後，會注入一個websocket客戶端，主要用來檢測到咱們修改內容後通知webpack來從新編譯並刷新頁面。

截止到這裏，已經能夠配置一個簡單的webpack用來打包啦，不過這只是一個入門級的，在實際項目中還遠遠不夠，到這裏若是你還有興趣，請繼續往下走~~

更多的配置

1. entry以及output進階。在項目中咱們可能會有這種需求，那就是配置多個入口文件，這就涉及到了一個出口文件的命名問題。

entry: {
    index: './src/index.js',
    main:'./src/main.js'
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash:8].js',
}
複製代碼

當咱們有多入口的時候，出口文件應該像這樣命名，而且能夠定義一個hash值，而且可使用冒號加數字來規定hash的長度。 2. 圖片的支持問題。咱們可使用兩個loader來處理圖片的打包問題，第一個是file-loader來解決CSS等文件中的引入圖片路徑問題，第二個是url-loader當圖片較小的時候會把圖片BASE64編碼。

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

3. 編譯less和sass,這裏一樣是配置規則來處理；

const cssExtract=new ExtractTextWebpackPlugin('css.css');
const lessExtract=new ExtractTextWebpackPlugin('less.css');
const sassExtract=new ExtractTextWebpackPlugin('sass.css');
{
    test:/\.less$/,
    use: lessExtract.extract({
        use:['css-loader','less-loader']
    }),
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
},
{
    test:/\.scss$/,
    use: sassExtract.extract({
        use:['css-loader','sass-loader']
    }),
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
},
複製代碼

4. 轉義ES6和ES7及JSX。咱們使用babel來轉義：

{
    test:/\.jsx?$/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ["env","stage-0","react"]
        }
    },
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
},
複製代碼

5. devServer配置服務器代理，這個在項目中應該是很是經常使用的了，咱們須要配置一個proxy屬性，大多數時候咱們在開發中處理跨域也須要用這個去請求後臺接口:

proxy: {
    '/api': {
        target: 'http://172.1.1.1:5000',
        pathRewrite: {'^/api' : '/api'},
        changeOrigin: true
    }
}
複製代碼

target的值就是你要請求的IP地址，能夠按需自行配置。 在進階中的代碼中，有配置loader的地方加了一個exclude屬性，這個的做用主要是指定哪些目錄下的文件不須要進行loader轉換。暫且說這麼多吧，一時就想起了這麼多，有須要的能夠留言一塊兒探討，下面再介紹些經常使用的loader和plugin吧~~

若有使用vue的項目能夠配置以下module規則，不須要的可自行刪減

module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    css: 'vue-style-loader!css-loader',
                    less: 'vue-style-loader!css-loader!less-loader'
                },
                postLoaders: {
                    html: 'babel-loader'
                }
            }
        },
        {
            test: /iview\/.*?js$/,
            loader: 'happypack/loader?id=happybabel',
            exclude: /node_modules/
        },
        {
            test: /\.js$/,
            loader: 'happypack/loader?id=happybabel',
            exclude: /node_modules/
        },
        {
            test: /\.js[x]?$/,
            include: [resolve('src')],
            exclude: /node_modules/,
            loader: 'happypack/loader?id=happybabel'
        },
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                use: ['css-loader?minimize', 'autoprefixer-loader'],
                fallback: 'style-loader'
            })
        },
        {
            test: /\.less$/,
            use: ExtractTextPlugin.extract({
                use: ['css-loader?minimize','autoprefixer-loader', 'less-loader'],
                fallback: 'style-loader'
            }),
        },
        {
            test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
            loader: 'url-loader?limit=1024'
        },
        {
            test: /\.(html|tpl)$/,
            loader: 'html-loader'
        }
    ]
}
複製代碼

經常使用plugin簡單介紹

• extract-text-webpack-plugin:此插件用來抽離css樣式，假如你的css樣式表很大推薦使用這個，以防止打包在js中引發樣式錯亂.
• copy-webpack-plugin:在webpack中拷貝文件和文件夾
• clean-webpack-plugin:用於在打包前先清空輸出目錄
• happypack:並行轉換文件，能夠更加快速的構建
• webpack.optimize.CommonsChunkPlugin:用於提取公共代碼
• webpack.DefinePlugin:用於建立一個能夠配置的全局變量，便於開發模式和發佈模式的構建
• webpack.optimize.UglifyJsPlugin:用來壓縮你的js代碼

暫時就寫到這裏了，能夠作一個入門瞭解，webpack還有好多好多東西....有時間整理下再繼續更新~~