webpack笔记

一 . 为什么需要webpack
一个应用程序往往会依赖很多其他的模块，或者编译scss、less、stylus等，如果仅仅是靠人来管理是不可能的，这个时候我们必须依赖于webpack来解决

二 . 入口

1. entry 设置入口文件

三 . 输出

1. output : {}
   path属性 打包后目录的绝对路径
   filename 打包后的js文件名称

四 . 加载器

1. moudle: {
   rules: [{loader对象}]
   } 加载器配置对象都放在module的rules里

2. loader对象配置
   test属性 是一个正则对象用来匹配某种类型的文件如test: /.css$/, 用来匹配一css结尾的css文件
   use属性 一个列表如[“css-loader”], 对css类型的文件使用css-loader来处理

   // 下面这个成员就是不同类型的文件的解析加载规则
   module: {
   rules: [
       // 配置的是用来解析.css文件的loader(style-loader和css-loader)
       {
           // 用正则匹配当前可被处理的文件的后缀名是  .css
           test: /\.css$/,
           // css-loader:读取css代码并解析为浏览器可以识别的代码
           // style-loader:把css代码添加到网页中
           use: ['style-loader', 'css-loader'] //webpack底层调用这些包的顺序是从右到左
       }
   ]
   

}

五 . 插件

1. webpack-dev-server 启动项目后自动打开浏览器

   devServer:{
       publicPath: '/dist',		//项目托管目录
       port:8080,
       openPage:'./dist/'			//默认打开哪个目录
   }
   

2. html-webpack-plugin 自动帮我们引入js,css等资源

   const HtmlWebpackPlugin = require("html-webpack-plugin");
   module.exports = {
   // 其他配置 ....
   
   plugins: [
       // + 新增配置
       new HtmlWebpackPlugin({
           template: "public/index.html",	// template指定默认html模板
           filename:'index.html', // 指定生成的目标文件
       })
   ]
   };
   

3. clean-webpack-plugin 每次删除旧的代码

      const { CleanWebpackPlugin } = require('clean-webpack-plugin');
      plugins: [
      	// 调用清除打包目录插件
      	new CleanWebpackPlugin(),
      ]
   

4. extract-text-webpack-plugin 提取css到到单独的文件夹, 需要配置loader

   const ExtractTextPlugin = require("extract-text-webpack-plugin");
    module: {
      rules: [
          // 配置的是用来解析.css文件的loader(style-loader和css-loader)
          {
              // 用正则匹配当前可被处理的文件的后缀名是  .css
              test: /\.css$/,
              // css-loader:读取css代码并解析为浏览器可以识别的代码
              // style-loader:把css代码添加到网页中
              // use: ['style-loader', 'css-loader'] //webpack底层调用这些包的顺序是从右到左
              use: ExtractTextPlugin.extract({	// 提取css
                  // 编译后用什么loader来提取css文件
                  fallback: "style-loader",
                  // 需要什么样的loader去编译文件
                  use: ["css-loader"]
                })
          },
       ]
   },
   plugins: [
      new ExtractTextPlugin('style/style.css'), // 提取到dist的style文件夹中
   ]
   

六 . 提取公共模块

 // + 提取公共模块配置
 optimization: {
      // 分割的块
      splitChunks: {
          chunks: 'all'	// 提取所有文件的共同模块
      }

七 . externals 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖

externals: {
 	vue: 'Vue',
     'vue-router': 'VueRouter',
     axios: 'axios',
     lodash: '_',
     nprogress: 'NProgress',
     'vue-quill-editor': 'VueQuillEditor'
 }