webpack的初步了解

webpack 的使用
    参考案例:
        https://www.jianshu.com/p/42e11515c10f
    1.大致的了解:
        1.案例代码:
            先看一看再说.
        2.再使用vue-cli的时候使用过的
            模块化的开发
            组件的的文件结构
            那webpack做的是什么?
                分析项目的结构,将浏览器不可以识别的语言进行转化和打包
        3.webpack 模块化的解决方案  
    2.简单的安装
        打包的方式1:
            webpack {entry file} {destination for bundled file}
            解释:
                入口文件  解析后的文件(包括解析后的文件名) 
                例如:
                    webpack app/main.js public/bundle.js
                    后面这个文件的名称必须写(不然是不会打包的)
        打包的方式2:
           通过配置文件来打包
           新建webpack.config.js 文件
           在终端运行webpack  即可
        打包方式3:
            在package.json的文件夹里面
            添加一段代码
                代码:
                "scripts": {
                    "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
                  },
                在终端执行语句:
                    npm run {script name}
                    或者执行
                        npm start 
======================================================================
        3.webpack的强大的功能
            1.通过devTools来配置Source Maps
                devtoolS的几种配置结果:
                    1.source-map:
                        完整,功能完全年有较好的source Maps
                        但是会减慢打包的速度
                    2.cheap-source-map
                        单独的文件中,生成不带映射的map
                        提高的打包的速度
                        但是,导致调试的时候,这可以对应到具体的行
                        不可以对应到,具体的列(对调试,造成了不便)
                    3.eval-source-map
                        使用eval 打包源文件模块
                        可以在同一文件中,生成干净完整的sourcemap
                        不会影响构建的速度
                        但是,会有安全和性能的隐患(开发阶段使用,生产阶段千万不要使用)
                    4.cheap-module-eval-source-map
                        最快的方式生成source map
                        没有映射
                        同样,会有安全和性能的隐患
                2.如何选择:
                    中小项目中 eval-source-map在开发阶段建议使用
                    cheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑时间成本时使用。
                3.配置的方法:
                    在webpack.config.js文件里面
                    module.exports={
                        //之后的语句不改变
                        devtools:'eval-source-map'
                    }
        4.使用webpack构建本地服务器
            浏览器可以监听代码的修改
            并且自动刷新修改后的结果
            执行代码:
                npm install --save-dev webpack-dev-server
            如何配置本地服务器:
                1.在配置文件里面webpack.config.js
                    添加一段代码:
                        devServer: {
                            contentBase: "./public",//本地服务器所加载的页面所在的目录
                            historyApiFallback: true,//不跳转
                            inline: true//实时刷新
                          } 
                2.在package.json文件里面
                    添加命令:
                        "scripts": {
                        "test": "echo \"Error: no test specified\" && exit 1",
                        "start": "webpack",
                        "server": "webpack-dev-server --open"
                      },
                    这样,使用 
                        npm run server 就可以打开服务器了
        5.Loader的使用
            简介:
                这个就是转换工具
                    将ES6转换为 ES5
                    将less文件 转换为css文件
                    将vue的文件 .vue 转换为浏览器可以识别的文件
                    .............
            如何配置loader:
                1.test:
                    用来匹配loader所处理文件的扩展名(使用的是正则表达式的格式)
                2.loader
                    loader的名称
                3.include/exclude
                    手动添加,必须处理的文件(文件夹)
                    屏蔽不需要的文件或者文件夹
                4.query
                    为loader提供额外的设置选项
===========================================================   
Loader 的使用之Babel的时间                 
Babel的安装与配置:
    1.什么是babel
        就是一个编译js的平台
        让你可以使用各种版本的js语言,和js的拓展语言
        由babel来,进行编译为,浏览器可以使用的语言
    2.babel的配置安装:
        1.安装一些依赖包:
            // npm一次性安装多个依赖模块，模块之间用空格隔开
            npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
        2.在webpack.config.js文件中进行配置
            module: {
                rules: [
                    {
                        test: /(\.jsx|\.js)$/,
                        use: {
                            loader: "babel-loader",
                            options: {
                                presets: [
                                    "env", "react"
                                ]
                            }
                        },
                        exclude: /node_modules/
                    }
                ]
            }
            之后:
                你就可以使用ES6或者JSX的语法了
                作者,在这里使用react的语法
                npm start 重新编译
                npm run server 
                打开127.0.0.1:8080  --就可以看到你的页面代码了
    3.单独的安装和配置babel
        1.为什么要单独的安装babel
            babel是可以直接在webpack.config.js中配置的
            但是,babel有许多的配置选项(比较麻烦的)
            于是,就有了一种解决的方案
                吧babel的配置,放在.babelrc的文件
        2.配置的方案;
            在webpack.config.js文件里面
                module: {
                    rules: [
                        {
                            test: /(\.jsx|\.js)$/,
                            use: {
                                loader: "babel-loader"
                            },
                            exclude: /node_modules/
                        }
                    ]
                }
            在babel的配置文件里面:
                //.babelrc
                {
                  "presets": ["react", "env"]
                }
=====================================================
webpack的核心观念  --一切皆模块
    感觉,有点类似于vue的观念(而vue又类似于react)
    开始我们的模块化学习:
        1.css模块
            1.使用了两个工具
                1.css-loader 
                    使用url()和@import的类似的功能
                2.style-loader
                    将计算之后的样式加入到页面当中
            2 .工具的安装
                    npm install --save-dev style-loader css-loader
                        
            3.相关的配置:
                在main.js里面导入css文件
                    import './main.css';//使用require导入css文件
                在webpack.config.js文件里面:         
                module: {
                    rules: [
                        {
                            test: /\.css$/,
                            use: [
                                {
                                    loader: "style-loader"
                                }, {
                                    loader: "css-loader"
                                }
                            ]
                        }
                    ]
                }
            4.css module的使用
                代码:
                    {
                        test: /\.css$/,
                        use: [
                            {
                                loader: "style-loader"
                            }, {
                                loader: "css-loader",
                                options: {
                                    modules: true, // 指定启用css modules
                                    localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                                }
                            }
                        ]
                    }
                为什么要使用它???
                    组件的类名的使用可以避免全局的污染
                    1.现有一个css文件吧
                        /* Greeter.css文件 */
                        .root {
                          background-color: #eee;
                          padding: 10px;
                          border: 3px solid #ccc;
                        }
                    2.使用文件你需要导入吧
                        import styles  from './Greeter.css'
                        注释:
                            导入的,据说是一个css样式的对象(厉害了)
                            而且他都没有 export ....(这个文件连导出都没有)
                    3.你到过来需要使用吧
                         <div className={styles.root}> //使用cssModule添加类名的方法
                         这个方法厉害了,从没有见过的
                                   
        2.css的预处理器(与之前的步骤类似需要进行配置和安装的)
            常使用的css 预处理loader 
                less Loader
                Sass Loader 
                Styles Loader
            还有一个css的处理平台  -PostCSS
            案例:
                postCSS 
                    代码可以根据浏览器的不同,自动的添加前缀
                安装步骤:
                    1.安装npm包
                       npm install --save-dev postcss-loader autoprefixer 
                    2.进行相关的配置:
                        1.在webpack的配置文件里面添加postcss-loader
                        代码:
                            module.exports = {
                                ...
                                module: {
                                    rules: [
                                        {
                                            test: /(\.jsx|\.js)$/,
                                            use: {
                                                loader: "babel-loader"
                                            },
                                            exclude: /node_modules/
                                        },
                                        {
                                            test: /\.css$/,
                                            use: [
                                                {
                                                    loader: "style-loader"
                                                }, {
                                                    loader: "css-loader",
                                                    options: {
                                                        modules: true
                                                    }
                                                }, {
                                                    loader: "postcss-loader"
                                                }
                                            ]
                                        }
                                    ]
                                }
                            }
                        2.新建文件postcss.config.js
                            // postcss.config.js
                            module.exports = {
                                plugins: [
                                    require('autoprefixer')
                                ]
                            }
====================================================
webpack的另一个模块                                                
    Plugins--插件
    Loader和Plugins是两个完全不一样的东西
        Loaders 用来处理源文件,一次处理一个
        Plugin用来对整个构建的过程起作用的
    使用插件的方法:
        1.自然是使用npm来安装他了
        2,在webpack.config.js的文件里面进行配置
            const webpack = require('webpack');
                module.exports = {
                ...
                    module: {
                        rules: [
                            {
                                test: /(\.jsx|\.js)$/,
                                use: {
                                    loader: "babel-loader"
                                },
                                exclude: /node_modules/
                            },
                            {
                                test: /\.css$/,
                                use: [
                                    {
                                        loader: "style-loader"
                                    }, {
                                        loader: "css-loader",
                                        options: {
                                            modules: true
                                        }
                                    }, {
                                        loader: "postcss-loader"
                                    }
                                ]
                            }
                        ]
                    },
                    plugins: [
                        new webpack.BannerPlugin('版权所有，翻版必究')
                    ],
                };
        简书的作者有给了几种常用的插件的使用方法:
            1.插件1:
                Html/WebpackPlugin
                    1.插件的安装
                        npm install --save-dev html-webpack-plugin
                    2.webpack.config.js的相关配置
                        plugins: [
                            new webpack.BannerPlugin('版权所有，翻版必究'),
                            new HtmlWebpackPlugin({
                                template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
                            })
                        ],
            2.插件2:
                Hot Module Replacement(实时刷新页面--热操作而已)
                .............
                配置之类的前不看了,先要理解webpack的使用流程
                之后,再看看其他的
            3.一些优化的插件
                OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
                UglifyJsPlugin：压缩JS代码；
                ExtractTextPlugin：分离CSS和JS文件
            4.clean-webpack-plugin:去除build文件中的残余文件
                cnpm install clean-webpack-plugin --save-dev
                引入clean-webpack-plugin插件后在配置文件的plugins中做相应配置即可：
                配置的代码:
                    const CleanWebpackPlugin = require("clean-webpack-plugin");
                          plugins: [
                            ...// 这里是之前配置的其它各种插件
                            new CleanWebpackPlugin('build/*.*', {
                              root: __dirname,
                              verbose: true,
                              dry: false
                          })
                          ]
        在开发阶段的一些使用方法:
            webpack.production.config.js的文件
==================================
又是一大块--关于webpack的缓存问题:
    缓存的最好方法是保证你的文件名和文件内容是匹配的
    把哈希值添加到打包的文件里面
        module.exports = {
            ..
                output: {
                    path: __dirname + "/build",
                    filename: "bundle-[hash].js"
                },
               ...
            };
        参考:
        http://mp.weixin.qq.com/s/aMwW0wY7NI1AjwFHZ7MNzg
        http://mp.weixin.qq.com/s/uY4bFpIB714G3-ytJhd81A