webpack初探(长期记录)最近一直想学习webpack，所以就边看视频边整理了一些笔记。一是为了强化自己的记忆，二是

最近一直想学习webpack，所以就边看视频边整理了一些笔记。一是为了强化自己的记忆，二是若有webpack的初学者可以借鉴一下这篇文章，我会尽量记录的详细一些。

首先就是本地安装webpack，注意：webpack4.0需要安装webpack-cli

npm init -y
npm i webapck webpack-cli -D

安装完之后文件目录应该是这样

然后我们在目录下次新建一个src文件夹，用来写我们的代码。 webpack是可以实现0配置的。注意：webpack是用node实现的，所以需要遵循node语法

比如：我们在src文件夹建立一个a.js文件

然后在新建一个index.js文件，用来引入这个a.js导出的字符串，并打印它。

好了，这一切就实现完了，接下来我们要将打印的这个字符串在浏览器上实现。webpack就是用来实现这个的。执行webpack自带的npx语法--npx webpack。然后我们目录里就多了一个dist文件夹，里边有一个main.js文件，这就是打包后的文件。我们建一个html文件来引用这个js文件，看看发生了什么。目前的文件夹情况。

然后我们打开这个html网页，打开控制台看看有没有打印出来。

好了，这就是webpack0配置，接下来我们要自己配置一套webpack。

建立一个webpack.config.js文件，里边书写webpack基本配置，至于为什么叫这个文件名我们以后在说，目前默认是叫这个。

先来说一说webpack里边都有哪些配置吧：
entry：入口   //表示打包哪一个js文件
output：出口  //表示打包到哪一个文件夹，规定文件名以及路径
plugins：插件 //有些功能需要一些插件来实现，类型为数组，里边放着webpck所有插件
module：模块  // webpack能处理js和json文件，但其他类型的文件需要loader才能处理，比如css、less、sass、jsx等文件
let path = require("path"); //node的包，用来书写绝对路径
var HtmlWebpackPlugin = require("html-webpack-plugin");//插件，将html模板打进制定目录
module.exports={
  devServer: {
    // 开发服务的配置
    port: 3000,
    progress: true, //进度条，webpack打包进度的进度条
    contentBase: "./build", //静态服务目录,运行的时候以这个目录来进行服务
    open: true   //自动打开网页
    mode: "development", //模式：一种是生产production，即线上环境，一种是开发development，就是我们本地的开发环境
  },
    entry: "./src/index.js",
    output: {
    filename: "bundle.[hash].js", //打包后的文件名,每次都产生一个新的文件
    path: path.resolve(__dirname, "build") //路径必须是绝对路径
  },
    plugins: [   //
    //一个数组，放着webpack所有插件。一般每个插件都是一个实例，都需要new来使用
    new HtmlWebpackPlugin({
    //这里我来详细描述一下：每次webpack打包都会在dist会生成一个js文件，然后建立一个html文件来引用这个js文件将代码显示在网页上。这样比较麻烦，不如我们来写一个html模板，将这个模板自动打进出口文件来进行引用
      template: "./src/index.html", //指定这个html文件为模板
      filename: "index.html", //模板被打包后的文件名
      minify: {
        //给html压缩
        removeAttributeQuotes: true, //删除html文件里属性的双引号
        collapseWhitespace: true //折叠空行
      },
      hash: true //添上哈西戳,为了解决缓存问题
    })
  ],
    module: {
    //模块
    // loader:
    rules: [
      //规则
      // npm i css-loader style-loader -D
      // css-loader 解析@import这种语法
      // style-loader 把css插入到head标签中
      // loader的特点：单一
      // loader的用法 字符串是一个loader的用法 多个loader需要一个数组
      // loader的顺序 默认从右向左执行
      // loader还可以写成对象形式，好处是可以多传一个参数options
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader",
            options:{
              insert:'top', //将css插到顶部 存疑
            }
          },
          "css-loader"
        ]
      },      
      {
        // 处理less文件
        test: /\.less$/,
        use: [
          {
            loader: "style-loader",
          },
          "css-loader",
          "less-loader"
        ]
      },
    ]
  }
}

webpack算是配置完成，每次我们运行的时候不能总是npx...吧，所以得书写一个脚本来运行webpack，这个在package.json文件里书写

  npm  i webpack-dev-server 
    "build": "webpack --config webpack.config.js", //打包 寻找webpack.config.js文件并按照配置进行压缩打包
    "dev": "webpack-dev-server"  //本地进行开发，启动项目

1.30记录

我们在写css的时候有些样式为了让浏览器识别是需要自动加上前缀的，所以我们需要一个loader-postcss-loader并为此需要做一个配置文件postcss.config.js，在文件里引入autoprefixer这个插件

postcss.config.js

module.exports={
    plugins:[require('autoprefixer')]
}
// 为了配合postcss-loader使用，为了给css自动加上前缀

不过需要注意的是postcss-loader在要css-loader前使用

然后就是对css进行打包和压缩了，我们要将css打包成一个文件并进行压缩，这里需要两个插件，但是压缩css文件需要属于webpack的优化项，在优化项里配置压缩css，就覆盖了js的自动压缩，所以我们也要配置js的自动压缩

const MiniCssExtractPlugin = require('mini-css-extract-plugin');  //插件 打包后将多个css抽离成一个css文件
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //压缩css文件
const TerserJSPlugin = require('terser-webpack-plugin'); //防止js不被压缩
// 因为optimization是优化项，css的压缩插件在这里边完成，所以添加了这个优化项js文件就不能被自动压缩
// 我们在添加css的压缩插件时也要将js的压缩插件也装上 TerserJSPlugin 就是压缩js的插件

module.exports = {  
  optimization:{
    // 优化项 webpack4新增的
    minimizer:[
      new TerserJSPlugin({
        cache:true,//是否使用缓存
        parallel: true,//是否并发打包
        // sourceMap: true,  //源码映射,为了更好的调试
      }), 
      new OptimizeCSSAssetsPlugin()]
  },
  ....

      {
        // 处理sass less css文件，我这里先只写less
        test: /\.less$/,
        use: [
          {
            loader: "style-loader",
          },
          MiniCssExtractPlugin.loader,  //处理完css使用这个loader npm下载
          "css-loader",
          'postcss-loader',   //一定要在css-loader前使用 为了给css自动加上前缀
          "less-loader"
        ]
      },