webpack3基础知识

## 本地化安装webpack ##

1. npm init //npm初始化生成package.json文件
2. npm install --save-dev webpack //安装webpack，dev表示安装到开发环境，save表示本地安装
3. 如果是老项目，有package.json文件，直接运行npm i 安装对应的依赖包

## webpack快速打包 ##

webpack src/entery.js dist/bundle.js 
//将entery.js打包到bundle.js
如果有配置文件，直接运行webpack即可

## package.json ##

{
        "name":"webpacktest",
        "version":"1.0.0",
        "description":"test webpack",
        "main":"index.js",
        "scripts":{ //本地npm启动命令：npm run xxxx
            "server":"webpack-dev-server --open",
            //open表示自动打开
            "build":"set type=build&webpack", //node语法，传递参数
            "dev":"set type=dev&webpack" //mac或linux：export type=dev&&webpack
        },
        "author":"tabb",
        "license":"ISC",
        "devDependencies":{  //开发依赖 --save-dev
            "webpack":"^3.6.0",
            "webpack-dev-server":"^2.8.2"
        },
        "dependencies":{  //生产依赖 --save 'npm install --production'(项目上线只安装生成包)
            
        }
    }

## webpack config ##

配置文件webpack.config.js
    const glob=require("glob");  //引入全局控制插件
    const path=require('path'); //引入路径模块
    const uglify=require('uglify-webpack-plugin'); //引入js代码自动压缩模块
    const htmlPlugin=require('html-webpack-plugin'); //引入html打包插件
    const extractTextPlugin=require('extract-text-webpack-plugin'); //引入文件分离插件
    const purifyCSSPlugin=require("purfiycss-webpack"); //引入css冗余删除插件
    const copyWebpackPlugin=require("copy-webpack-plugin"); //引入静态资源处理
    //根据配置传值，打包出不同的根目录，区分生产环境和开发环境
    if(process.env.type="build"){ //node语法
        var website={
            publicPath:"http://tabb.com/"    //设置根路径
        }        
    }else{
        var website={
            publicPath:"http://192.168.0.104/"    //设置根路径
        }    
    }
    var website={
        publicPath:"http://192.168.0.104/"    //设置根路径
    }
    module.exports={
        entry:{ //入口文件路径
            entry1:'./src/entry1.js'，
            entry2:'./src/entry2.js'，
            jquery:'jquery',
            vue:'vue'
        },
        output:{ //出口文件
            path:path.resolve(__dirname,'dist'),
            filename:'bundle.js' //可写[name],js保持与入口文件名一致
            publicPath:website.publicPath //设置项目引用的公共路径
        },
        module:{
            rules:[ //css打包
                {
                    test:/\.css$/,  //正则匹配对应需要处理的文件
                    use:['style-loader','css-loader']  //添加打包需要使用的功能模块
                    //也可以写成如下形式
                    use:[{
                        loader:'style-loader'
                    },{
                        loader:'css-loader'
                    },
                    "postcss-loader" //css3自动加前缀
                    ],
                    //extract抽离处理
                    use:extractTextPlugin.extract({
                        fallback:"style-loader",
                        use:"css-loader"
                    })                
                }，
                {
                    test:/\.(png|jpg|gif)/, //处理图片
                    use:[
                        {
                            loader:'url-loader',
                            boptions:{
                                limit:5000  //设置图片小于多大显示为base64编码
                                outputPath:"images/" //配置图片生成路径
                            }
                        }
                    ]
                }，
                { //处理html中image标签引用图片
                    test:/\.(htm|html)$/i,
                    use:['html-withimg-loader']
                }，
                { //处理less文件
                    test:/\.(htm|html)$/i,
                    use:[
                        {
                            loader:"style-loader"
                        },{
                            loader:"css-loader"
                        },{
                            loader:"less-loader"
                        }
                    ]                
                },
                { //babel配置
                    test:/\.(jsx|js)$/,
                    use:{
                        loader:"babel-loader",
                        options:{
                            presets:["es2015","react"]
                        }
                    },
                    exclude:/node_modules/                    
                }
            ]
        },
        plugins:[
            new copyWebpackPlugin({ //处理静态资源
                from:__dirname + "/src/public", //静态资源来源
                to:"./public" //默认到dist目录下
            }), 
            new webpack.optimize.CommonsChunkPlugin({ //配置第三方插件抽离打包
                name:['jquery','vue'], //对应入口配置entry中的key
                filename:"assets/js/[name].[ext]", //配置输出路径，可将[ext]改为js，[name]自动匹配配置的名称
                minChunks:2 
            })
            new webpack.ProvidePlugin({
                $:"jquery"
            }),
            new uglify(), //开发环境会报错，因为开发环境代码100%不压缩
            new htmlPlugin({
                minify:{ //配置压缩条件
                    removeAttributeQuotes:true //去除标签中的引号
                },
                hash:true, //给引入的js添加hash，保证加载新文件，防止缓存
                template:'./src/index.html'
            })，
            new extractTextPlugin("/css/index.css"), //指定css分离打包路径
            new purifyCSSPlugin({
                paths:glob.sync(path.join(__dirname,'src/*.html'))  //全局搜索html文件中的dom，找到有效的css
            }),
            new webpack.BannerPlugin("tabb版权所有") //设置打包文件的title注释
        ],
        devServer:{ //开发服务配置，需要安装webpack-dev-server 
            contentBase:path.resolve(__dirname,'dist'), //基本目录结构
            host:'192.168.0.104', //服务器host
            compress:true, //服务器是否启用压缩
            port:1717  //端口
        },
        watchOptions:{  //自动监测watch打包配置
            poll:1000, //监测修改的时间
            aggregeateTimeout:500, //表示500ms内重复按键ctrl+s不进行打包
            ignored:/node_modules/,  //忽略监视项
        }
    }

## babel配置文件，babelrc ##

{
        presets:["env","react"] //env转换es6,es7等
    }

## webpack中的工具安装 ##

1. webpack-dev-server //热更新工具
2. style-loader   //样式处理
3. css-loader   //css文件处理
4. uglify-webpack-plugin  //js自动压缩插件
5. html-webpack-plugin  //html打包插件
6. url-loader  //处理路径
7. file-loader //处理加载文件
8. extract-text-webpack-plugin  //抽离css等文件打包
9. html-withimg-loader  //处理html中使用img标签引用图片
10. less less-loader //less编译
11. sass sass-loader  //sass编译
12. postcss-loader autoprefixer //css3自动添加前缀依赖
13. purify-css purify-webpack  //自动删除css冗余
14. babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-env //babel用于编译es6等语法，以及react中的jsx
15. webpack.ProvidePlugin  //统一配置引入插件
16. webpack.optimize.CommonsChunkPlugin //配置第三方插件抽离打包
17. copy-webpack-plugin //静态资源打包