webpack小记

1、webpack是什么？

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源webpack的安装

2、首先要确保安装了node

其次可以全局安装，可以项目中安装

npm install webpack (--g)

3、webpack使用

（1）执行命令  webpack main.js bundle.js

         main.js入口文件

         bundle.js出口文件  执行该命令后会自动生成bundle.js，然后在html里引入bundle.js即可。

（2）webpack.config.js

          在目录下创建webpack.config.js，则直接执行webpack命令即可

4、webpack.config.js配置

（1）entry参数：入口文件配置

         entry: //string | array | object。入口文件是应用程序的起点入口，从这里应用程序启动执行。如果传递的是一个数组，那么数组的每一项都会执行。

         规则：每个HTML页面都有一个入口起点。单页应用（SPA）：一个入口起点；多页应用（MPA）：多个入口起点。

         命名：如果传入一个字符串或字符串数组，chunk会被命名为main。如果传入一个对象，则每一个键（key）是chunk的名称，该值描述了chunk的入口起点

         entry:’main.js’字符串时候如work2

         entry: {

                bundle1:'./main.js',

                bundle2:'./main2.js'

          },

          work4里面是main.js引入其他js，然后生成一个js，html中引用即可

 

（2）output参数：输出文件配置

          常用的参数path、publicPath、filename、chunkFilename

          filename 用于输出文件的文件名。

          path 目标输出目录 的绝对路径。

          对于有多个入口起点的，filename: '[name].js',即可

 

（3）常用loader(加载器)配置

         webpack只能解析js，所以对于其他中类的文件就需要各种loader来解析

         module.rules.test是正则表达式，用来匹配不同的文件

         module.rules.use是指定要加载特定的loader

（4）resolve.alias配置别名

         如：resolve:{
                     alias:{
                              'jquery': './js/jquery-1.11.1.min.js',
                              'Vue': './js/vue.min.js'
                     }
                 }
        使用的时候，这样就可以var $=require("jquery");
（5）ProvidePlugin

         其实我们都非常懒，懒到require也不想加。providePlugin则帮我们解决，如下：

         plugins: [
                //提供全局的变量，在模块中使用无需用require引入
                new webpack.ProvidePlugin({
                      $: "jquery",
                      Vue: "Vue",
                }),
                new uglify()
        ]

不管是使用resolve.alias还是ProvidePlugin，打包的时候，webpack都会将使用到的库进行打包。

如果我们不想webpack打包某个文件，而是直接在页面使用script标签手动引入，或者使用CDN资源的时候，externals这个配置项就起作用了。

（6）externals登场

         externals: { '$': "jquery",'vue': 'Vue', },

         使用时候：var $ = require("$");