webpack

资源多，请求多可以利用webpack打包工具，把很多js文件打包到一个js文件里

1. 安装

1,1  全局安装    npm install webpack -g  全局用的是自己电脑安装的webpack，如果放到别人电脑可能就无法打包了

1,2  局部安装 ( 推荐 )    npm i -D webpack 安装到项目中,需要通过配置 package.json, 的'scripts': { "bulid":"webpack","start":"node ./src/main.js" } npm run bulid 来打包

然后将打包好的js文件引入页面中就可以了

npm  init -y  配置出package.json

2. 打包

2.1 webpack  入口文件模块路径  出口文件模块路径

如果不想每次都写 入口和出口文件路径

可通过配置  webpack.config.js      该文件其实最终是要在node环境下执行的

里面写    const  path = require('path');

module.exports = {

      entry: './src/main.js' ,    //入口文件模块路径

      output: {

            path:path.join(__dirname,'./dist/') ,    // 出口文件模块所属目录，path必须是一个绝对路径

            filename: 'bundle.js'    // 打包的结果文件名

      }

}

配置好后直接 webpack 就可以打包了

3. 如果要打包CSS文件   

3.1 安装依赖： npm install --save-dev style-loader css-loader

3.2 在webpack.config.js配置    参考官方文档  https://webpack.js.org/guides/asset-management/#loading-css

3.3 在main.js中写  import "./main.css"    除了js可以省略后缀名外，其他都要后缀名

3.4 npm run build

解释： 也是把CSS打包成js，然后在运行js文件的过程中，会动态地创建style标签插入到head中

4. 如果要打包图片

4.1 npm  install  --save-dev file-loader

打包结束后，如果index.html在根目录直接运行的话，那么图片资源这些路径就无法访问到了。

解决方案就是把index.html放到dist目录中。但是 dist 是打包编译的结果，而非源码，所以把index.html放到dist就不合适

综合来说：我们最好用一个插件：html-webpack-plugin来解决

① 安装依赖  npm i -D html-webpack-plugin

② 在webpack.config.js中 

const  htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

      plugins:[        // 该插件的作用就是把index.html 打包到你的 bundle.js文件所属目录

//就是说你打包的js文件在哪，index.html就到哪

//同时也会在index.html页面中自动引入你打包的js文件，不用手动加

//这个插件还可以配置压缩html的处理

          new  htmlWebpackPlugin( { template :'./index.html ' })

      ],

}

6.  webpack-dev-server 

每次手动打包很麻烦，而且即便有  --watch也不方便，还需要自己手动刷新浏览器， 它可以实现监视代码改变，自动打包，打包完毕自动刷新浏览器的功能

6.1 安装依赖  npm  i -D webpack-dev-server

6.2 ①webpack-config.js配置：      ② package.json 配置：

6.3  npm run dev

7.babel-polyfill （提供低版本浏览器不支持的API）   

    npm install --save-dev babel-polyfill

    在webpack.config.js中配置 entry: ['babel-polyfill','./src/main.js'],

    这样的话就会在打包的结果中提供一个垫脚片用以兼容低版本浏览器不支持的API

8. 配置 babel-plugin-transform-runtime 来解决代码重复问题

    在打包过程中，babel会给某些包提供一些工具函数，而这些工具函数可能会重复的出现在多个模块中，

    这样的话会导致打包体积过大，所以babel提供了一个babel-transform-runtime来解决这个打包体积过大的问题

8.1 安装依赖  npm install babel-plugin-transform-runtime --save-dev

    npm install babel-runtime --save

      在webpack.config.js 配置  options :{ presets:['env'], plugins:['transform-runtime'] }

9. 打包 .vue单文件组件

9.1  npm i -D vue-loader  vue-template-compiler

9.2  在webpack.config.js配置

      module:{

            rules:[

              {

      test: /.vue$/,

      use: [

            'vue-loader'

      ]

}

            ]

        }

开启 babel-loader的缓存功能节省编译时间  在options:{ cacheDirectory:true, }

10. 打包第三方包 

比如  npm i jquery

在main.js中    import $ from 'jquery'

在index.html  script src  jquery    引用文件资源的时候以打包后的最终的index.html所在的路径为准

在webpack.config.js  externals: { jquery:"jQuery" },  jquery（key）就是包名，jQuery（value）是全局jQuery导出的接口

11. --save和--save-dev的区别

    我们把开发工具相关的依赖信息保存到devDependencies, 把核心依赖的依赖信息保存到dependencies选项中

    这样做的话，就是把开发依赖和核心依赖分开，因为开发依赖在打包结束后上线的话就不需要了

    最后项目上线，我们真正需要的是dependencies依赖项中的包。

    我们可以通过命令来只安装dependencies依赖项中的包 npm install --production

    webpack.config.js  中  devServer:{contentBase:'./' },  index.html的引入文件路径该怎么写怎么写，

    上线发布的时候，把核心依赖安装到当前index.html打包的结果目录中

12. vue的工程

main.js里：      import Vue from 'vue'

                            import  App from './App.vue'

                            new  Vue({

                                el:"#app",

    template:'' 或 '',    这个会替换掉index.html里的

                                components:{ App}

                }

            )

      App.vue里