webpack-學習篇

如今webpack已是主流了，我如今學習它比較晚了，可是我不想更晚，最好的學習時間就是如今。你想學習也可使用個人記錄，裏面我都寫了詳細的註釋。

學習記錄：https://github.com/ktQueen/study-webpack

官網：https://webpack.js.org/

中文官網：https://www.webpackjs.com/

webpack定義
一個模塊打包器

webpack特性：
1.代碼分割
2.loader：能夠處理css、圖片、json、less、自定義文件

webpack目標
1.會切分依賴樹，會把依賴樹切分到不一樣的代碼塊裏，而後按需加載這些依賴，這跟前端的懶加載有點像
2.保持初始化的加載時間更少
3.任何的一個靜態資源均可以被視爲一個模塊在項目中被引用，這一點在開發過程當中會起到不少便利
4.他能夠整合第三方一個類庫，而且把第三方的一些類庫也似作爲一個模塊在項目中引用
5.能夠在打包的過程當中去自定義想作的一些事情
6.很是適合大型項目

安裝
1.npm init 初始化npm，這個時候會生成一個package.json
2.npm install webpack -g 安裝全局環境下的webpack
3.npm install webpack --save-dev 在文件夾裏裝webpack ，這個時候會生產node_modules文件夾

執行
這樣webpack就能夠執行打包了
Hash
Version:版本
Time:打包的時間
列表：

1. Asset 此次打包生成的文件
2. size:此次打包的文件的大小
3. Chunks此次打包的分塊
4. Chunk Names:此次打包的塊名稱

loader
這些是基礎經常使用的loader，必需要掌握的。
模版、html處理的loader
html-loader
ejs-loader
樣式處理的loader
style-loader：經過css-loader處理完的一個文件新建一個style標籤插入到咱們的html裏面，當咱們的html引入了打包後的文件後，咱們的代碼就會執行，咱們的css就會插入到head標籤裏
css-loader：使webpack能夠處理.css文件
postcss-loader
less-loader
sass-loader
圖片處理的loader
file-loader
url-loader：圖片轉爲base64
image-webpack-loader:圖片壓縮

plugins
html的插件
html-webpack-plugin

不想移步的，我把配置直接放這裏

// 操做文件路徑模塊
const path=require('path')
// 經過npm 安裝這個插件
// require是commonjs的引用方法
const HtmlWebpackPlugin=require('html-webpack-plugin')
// 用於訪問內置插件
const webpack=require('webpack')

const config={
    context:__dirname,
    // 模式 production或development
    mode:'development',

    // 1入口文件，全部的文件從這個文件依賴
    // entry:'./src/script/index.js',
    // 2兩個平行的，不相互依賴的文件，卻想打包在一塊兒
    // entry:['./src/script/index.js','./src/script/hello.js'],
    // 3多頁面應用場景
    entry:{
        page1:'./src/script/index.js',
        page2:['./src/script/hello1.js'],
        page3:'./src/app.js'
    },

    // 出口文件
    output:{
        // 路徑
        path:path.resolve(__dirname,'dist'),
        // 名稱
        // hash每一次打包每一個文件hash是同樣的
        // chunkhash每次打包每一個文件hash不同，只要文件變了生成的hash就會修改，文件沒有修改hash不作改動
        filename:'js/[name].bundle.js',
        // 佔位符，你在html引用後的js路徑，上線後就會用這個字符替換爲這個開頭的一個路徑
        // publicPath:'http://www.com'
    },
    // loader,遇到什麼文件先用什麼loader轉換一下
    module:{
        rules:[
            {
                test:/\.js$/,
                // 排除範圍
                exclude: path.resolve(__dirname,'node_modules'),
                // include包含範圍
                include:[path.resolve(__dirname,'src')],
                use:'babel-loader',
                //query能夠放在webpack也能夠放在package.json,也能夠在根目錄建文件.babelrc裏面
                // query:{
                //     presets:["lastest"]
                // }
            },
            {
                test:/\.txt$/,
                use:'raw-loader'
            },
            {
                test:/\.html$/,
                use:'html-loader'
            },
            {
                test:/\.tpl$/,
                use:'ejs-loader'
            },
            {
                test:/\.css$/,
                //loader的執行順序，從後往前
                // loader:'style-loader!css-loader!postcss-loader',
                use: [
                    'style-loader', 
                    {
                        loader:'css-loader',
                        options:{
                            // 處理引入進來的css文件
                            //importLoaders默認是0，意思是一個加載器都不用，
                            // 1:用postcss-loader加載器處理，
                            // 2:用postcss-loaders和sass-loader加載器處理
                            importLoaders:1
                        }
                    },
                    { 
                        loader: "postcss-loader",
                        options: { 
                            plugins: [ 
                             require("autoprefixer")({ 
                                 browsers: ['last 5 versions'] 
                                }) 
                            ]
                         }
                    }
                    ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')({
                                    browsers: [
                                        "last 10 version"
                                    ]
                                }),
                            ],
                        }
                    }, {
                        loader: "less-loader", options: {
                            sourceMap: true
                        }// compiles Less to CSS
                    }]
            },
            {
                test: /\.sass$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')({
                                    browsers: [
                                        "last 10 version"
                                    ]
                                }),
                            ],
                        }
                    }, {
                        loader: "sass-loader", options: {
                            sourceMap: true
                        }// compiles Less to CSS
                    }]
            },
            {
                test:/\.(png|jpeg|gif|jpg)$/i,
                use:[
                    {
                        // loader: "file-loader",
                        loader: "url-loader",
                        options: {
                            limit: 1000,
                            name: 'images/[name]-[hash:5].[ext]'
                        }
                    },
                    // 圖片壓縮
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            disable: true,
                        }
                    }
                ]
            },
            
        ]
    },
    // postcss:[
    //     // commonjs的用法
    //     require('autoprefixer')({
    //         browsers:['last 5 versions']
    //     })
    // ],
   // 插件
   plugins:[
    // 多頁面就配置多個
    new HtmlWebpackPlugin({
        // 文件名
        // filename:'index-[hash].html',
        filename:'index.html',
        // 模版
        template:'index.html',
        // 腳本放在頭部仍是body
        // inject:'head',
        // inject:false,
        // 傳參在模版中引用
        title:'123213',
        date:new Date(),
        // html文件壓縮
        minify:{
            // 刪除註釋
            removeComments:true,
            // 刪除空格
            collapseWhitespace:true
        },
        // 包含的chunk
        chunks:['page1','page2'],
        //排除chunk,其餘的會被加載進來
        excludeChunks:[]
    }),
    new HtmlWebpackPlugin({
        filename:'index11.html',
        template:'index.html',
        inject:'head',
        title:'大大',
        chunks:['page2']
    }),
    new HtmlWebpackPlugin({
        filename:'index22.html',
        template:'index.html',
        inject:'body',
        title:'大房貸首付大',
        chunks:['page3']
    })
]
}
// module.exports是commonjs的模塊化輸出
module.exports=config;