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;