前端的工程化和自动化

前端的工程化和自动化 grunt gulp browserify webpack当今主流 webpack vue react angular 当前市面 2 个版本 webpack 3.0 webpack 4.0webpack 4一、webpack 基础认识
1. 官网地址

官网: https://webpack.js.org/    中文: https://www.webpackjs.com/    前身: browserify    缺点，只能转化js
1. webpack作用?

            干嘛的:    项目管理、打包、模块管理(依赖问题)、加载资源(js/css/html/png../woff/data/vue...),转换器(loader)            前身：grunt/gulp/browserify->webpack->pratcle
1. webpack的历史

          webpack1支持CMD和AMD，同时拥有丰富的plugin和loader，webpack逐渐得到广泛应用。              webpack2 支持ES Module，分析ESModule之间的依赖关系，webpack1必须将ES，Module转换成CommonJS模块，2支持tree sharking              webpack3 新的特性大都围绕ES Module提出，如Scope Hoisting和Magic Comment；        前端的模块化    AMD : require.js    CMD : sea.js( 弃用了 )    COMMON.js ： node.js
1. 环境支持： Node 8


1. 安装：

    全局     npm i webpack webpack-cli -g        cnpm i webpack webpack-cli -g        yarn add webpack webpack-cli global    cli 命令行工具 打包会依赖cli    本地（项目目录）    npm i webpack webpack-cli --save-dev 开发依赖    项目： 优先找本地  ----》 全局
1. 概念：

        webpack是一种静态编译工具(预编译)            我们主要研究： 入口文件、出口、转换器、
        插件-------------------------------------------------------------------------------------------------------------------------
        二、webpack--打包    development： 开发环境production；  生产环境    二阶段项目        生产环境   浏
        览器直接运行了        开发环境   程序员而言， 依赖服务器环境来做    webpack  --mode development  
        会自动找src/index.js 到 dist/main.js    要求设置开发模式|生产模式    webpack 入口地址 --mode 
        development  指定出口    webpack aa/index.js --mode development  bb/index.js  自定义    环境分离 
               development:            a.浏览器调试工具            b.注释、开发阶段的详细错误日志和提示            c.
               快速和优化的增量构建机制        production:            a.开启所有的优化代码            b.更小的main大
               小            c.去除掉只在开发阶段运行的代码            d.Scope hoisting(作用域提升)和Tree-
               shaking(打包的结构只包含实际用到的 exports)-------------------------------------------------------------------
               ------------------------------------------------------三、webpack----自动解决依赖:        原理：Webpack 会
               分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 main.js 。Webpack 会
               给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 main.js 
               中的代码，其它模块会在运行 require 的时候再执行。四、webpack - loader：    webpack默认只
               支持javascript文件(默认)    * 其他文件(CSS/LEASS/..)    需要用加载器(loader)    loader:    类似一
               种转化器， 它可以把一个东西，转成另一个        需要下载    style-loader(读取到的css文件插到页
               面)    css-loader(读取css文件)        下载: npm install style-loader css-loader -D        require('style-
               loader!css-loader!./xx.css')----------------------------------------------------------------------------------------------
               ---------------------------
               五、配置:webpack.config.js  是一个nodejs    作用: 配置一些webpack需要入
               口、出口、loader、Chunk代码块、Plugin扩展插件、Module模块    编写：        module.exports={            
               entry:'./src/index.js'    入口文件            output:{ 默认输出到dist               
                path:path.resolve(__dirname,'dist')//指定编译目录  不写默认指定到dist                filename:'js/boundle.js'//以编译目录为根的出口文件路径            },            module: {                rules:[                    {test:'/\.css$/',use:['style-loader','css-loader']}                ]            },            mode:'development' | production 区别环境        }多入口(多页面)    entry: 入口接收string | json        {app:'index1.js',app2:'index2.js'} 输出要求多输出    output: {        path:path.resolve(__dirname,'dist') //指定编译目录        publicPath:'dist', //指定虚拟目录 不写指向编译目录，html引入js时，必填        filename:'bundle.js' 单文件输出 | '[name].js' 多输出  html引入app和app2 配合    }    webpack    开发环境下编译(打包到bundle.js)    webpack -p    生产环境下编译(打包到bundle.js,并压缩)    webpack -w    监听文件改动,自动编译,不用每次运行,但不会自动刷新浏览器-------------------------------------------------------------------------------------------------------------------------
                六、webpack --前端服务器--webpack-dev-serverhttp-server  / server /  webpack-dev-server  第三方服务包需要自动刷新： webServer 搭建前端开发服务器    cnpm install webpack-dev-server -g | -D    参数:        命令行        webpack-dev-server --port 8088 --open --mode development        写到webpack.config.js配置文件:        devServer: {//和module同级            port: 8088,            open:true        }        终端运行方式2: webpack-dev-server        把运行命令放到package.json文件:    devServer可以不要了        "scripts":{            "dev": "webpack-dev-server  --port 8088 --open"        }        终端: npm run dev        -------------------------------------------------------------------------------------------------------------------------
                七、webpack---优雅降级babel使用: ES6->ES5  tracuer  babel   低版本：  npm install babel-loader babel-core babel-preset-es2015 -D   高版本： npm install babel-loader@8.0.4 @babel/core @babel/preset-env -D    做个js文件模块，测试导出引入    导出模块:        export default {}    引入模块:        import 名字 from 模块名    配置babel预设:        module>rules> + {}          {            test:/\.js$/,            exclude:/node_modules/, 排除            use:[{              loader:'babel-loader',              options:{                presets:['@babel/preset-env']              }            }]          }-----------------------------------------------------------------------------------------------------------------------------------------------------
                八、webpack ---  省略引入文件名后缀   // 配置webpack.config.js    resolve: {     //与module同级        extensions: [ '.js', '.css', '.json', '.jsx']    }    require('./style')// 可以省略后缀名----------------------------------------------------------------------------------------------------------------------------------------------------
                -九、webpack --- 产出html    webpack  webpack-dev-server webpack-cli  本地的    npm i html-webpack-plugin ---save-dev    const HtmlWebpackPlugin = require('html-webpack-plugin')    plugins:[            new HtmlWebpackPlugin({                template: './index.html',                filename: './index.html',//默认到output目录                hash:true,//防止缓存,会给文件后面加入hash                minify:{                    removeAttributeQuotes:true//压缩 去掉引号                }            })    ]    publicPath: '/', 指定虚拟目录为空，因为index进入到dist目录里了，不在外面了    filename: 'js/[name].js',-----------------------------------------------------------------------------------------------------------------------------------------------------
                十、css抽离（代码分离）        yarn add extract-text-webpack-plugin@next --dev    npm i extract-text-webpack-plugin@next --save-dev | -D        //@next 兼容webpack4 未来会不需要    const ExtractTextWebapckPlugin= require("extract-text-webpack-plugin")    //loader配置：    use: ExtractTextWebapckPlugin.extract({          use: 'css-loader'        }) //不再需要style-loader    //pulgin配置    new ExtractTextWebapckPlugin('css/[name][hash:6].css')-----------------------------------------------------------------------------------------------------------------------
                十一、图片打包yarn add url-loader file-loader --devnpm I url-loader file-loader --save-dev    //url-loader 存base64  file-loader存文件（woff mp3）    {        test:/\.(png|jpg|gif)/,        use:[{          loader: 'url-loader',          options: {            limit: 5000,//字节少于5000 ——》 base64  超过5000  file            outputPath: 'images/', 5000意思存到images          }        }]      }//css中引入 | js动态(模块化) 引入---------------------------------------------------------------------------------------------------------------------------
                十二、资源copy：    静态资源(js，数据图片，json) 生产环境        npm i copy-webpack-plugin -D    const CopyWebpackPlugin = require('copy-webpack-plugin')//plugin配置    new CopyWebpackPlugin([      { from: path.resolve(__dirname,'static'), to: path.resolve(__dirname,'build/static') }    ])-----------------------------------------------------------------------------------------------------------------------------
                十三、配置文件拆分webpack.config -> webpack.config.dev|prod   "dev": "webpack --mode development --config config/webpack.config.dev.js","build": "webpack --mode production --config config/webpack.config.prod.js","server": "webpack-dev-server --mode development --config config/webpack.config.dev.js"

十四、

devtool: ‘source-map’
制定报错信息的源