前端构建工具Webpack的学习

什么是webpack？

百度词条：“Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。要使用Webpack 前须先安装Node.js。”

webpack可以做什么？

优化：删除多余的冗余代码，压缩；
转换：jsx，es6，es6的语法转换，less，sass等预编译处理器的转换；
打包：合并多余文件，减少请求次数，加快响应；
devServer代理解决跨域问题。
……

目标

通过webpack完成对公司现有项目从0开始的定制化搭建；
摒弃现在脚手架中冗余的代码及配置；
了解wbpack的一些原理，流程。

结构

module.exports = {
  mode: "development", // 模式 =》 开发模式，生产模式
  entry: 'src/main.js', // 入口
  output: __dirname, // 输出
  module: {}, // 加载转换=》less || sass || 图片|| j'sx || es6 || es7
  plugins: [], // 插件
  devServer: {}, // 服务代理
  resolve: {}, // 特殊问题的解决方案
}

基本配置与命令行操作

命令行操作

安装：

npm i webpack webpack -cli -g

webpack：webpack的核心模块

webpack-cli：执行webpack相关的命令行

webpack -v 查看当前webpack的版本号
webpack --mode development/production 指定webpack的运行模式为开发模式/生产模式，默认是生产模式
webpack --config filename 指定webpack命令依赖的配置文件，默认是webpack.config.js文件
webpack src/main.js --output filename 指定输出文件为filename,默认输出文件为dist/main.js

###基本配置

在项目根目录执行npm init -y生成package.json文件
在scripts对象中添加命令

"scripts": {
	"build": "webpack src/main.js --mode development"
}

执行npm run build命令时，就相当于执行了webpack src/main.js –mode development命令

属性详解

entry

module.exports = {
	// 字符串：单个入口单个输出
  // 数组：多个入口单个输出
  // 对象：多个入口多个输出 对象的属性名one和two可通过name作为输出的文件的名字前缀
	entry: "src/one.js" || ["src/one.js","src/two.js"], {
	one: "src/one.js",
	two: "src/two.js"
	}，
  output: {
    filename: "[name].blund.js", // 这里的name就是entry为对象时的属性名
  }, 
}

output

module.exports = {
  // 对象 {filename:'打包后文件的名字', path: '打包后文件的路径'}
  output: {
    filename: "[name].blund.js", // 这里的name就是entry为对象时的属性名。
    filename: "[hash].blund.js", // 这里的hash及时一个随机的一个哈希字符，确保打包后文件名字的唯一性
    path: __dirname + '/dist', //打包后就是在webpack当前目录下的dist下
  }
}

plugins

webpack依赖于Node.js。因此引入依赖模块时需要使用node.js的模块导入

####clean-webpack-plugin

可以实现在打包时，清空原有的内容，该插件每次迭代使用方法差距较大需要关注官方文档
下载：npm i clean-webpack-plugin -D

html-webpack-plugin

默认会在dist文件下生成一个html文件并引入打包好的js文件，详细功能见demo
下载：npm i html-webpack-plugin -D

extrace-text-webpack-plugin

拆分打包后的css文件到单独的css文件夹，而不是加载到HTML的style中
下载：npm i extract-text-webpack-plugin

module

各个模块的加载转换预编译处理器=》css，es6抓换成es5等。

css

// npm install style-loader css-loader -D
module: {
  rules: [
    {
      test: /.\.css$/, //医生的药房，道士的画符，程序员正则，天下三大奇闻。
      // npm install style-loader css-loader -D
      // loader: ["style-loader","css-loader"], //加载css然后将css放置到style标签中
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader'
      }) // 拆分打包后的css文件 需在插件中注册
    },
  ]
},

less

// npm install style-loader css-loader less less-loader -D
module: {
  rules:[
    {
      // npm i less-loader less -D
      // 将less转换为css并加载转换后的css到style
      test: /.\.less$/,
      // loader: ["style-loader","css-loader","less-loader"],
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ["css-loader","less-loader"]
      }) // 拆分打包后的css文件 需在插件中注册
    },
  ]
},

sass

// npm install style-loader css-loader sass-loader node-sass -D
module: {
  rules: [
    {
      // npm i sass-loader node-sass -D
      test: /.\.scss$/,
      // loader: ["style-loader","css-loader","sass-loader"]
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ["css-loader","sass-loader"]
      }) // 拆分打包后的css文件 需在插件中注册
    },
  ]
},

image

// npm i url-loader file-loader -D
module: {
  rules: [
    {
      // npm i url-loader file-loader -D
      test: /.\.(jpg|jpeg|gif|svg)$/,
      // loader: ["url-loader"],
      use: [
        {
          loader: "url-loader",
          query: {
            limit: "1844560", // 指定图片的大小，当图片字节小于该值时，转换成base64,当图片字节小于该值时，需要安装file-loader
            outputPath: "img", //指定图片放置的文件夹
          }
        }
      ]
    },
  ]
},

jsx|es6|es7|es8|es9…

// npm install babel-loader babel-core babel-preset-react babel-preset-env -D
module: {
  rules: [
    {
      // npm install babel-loader babel-core babel-preset-react babel-preset-env
      test: /.\.(js|jsx)/,
      exclude: /node_modules/, // 排除指定的文件
      loader: "babel-loader",
      query: {
        presets: [
          "babel-preset-react",
          "babel-preset-env"
        ]
      }
    }
  ]
},
resolve: {
  extensions: [".js",".jsx"], //解决.jsx不识别的问题
},

注：

之所以要配置这些东西，是为了支持在js中引入这些css/img静态资源文件，并将这些资源打包加载。
需要注意的是loader:[“stye-loader”,”css-loader”],这两个必须在开始且顺序不能乱，因为他的执行是从右开始执行，比如说less转换成css=》加载到style=》extract拆分到单独的路径。

devServer

设置webpack的服务模块，可设置服务代理，解决跨域问题

module.exports = {
	devServer: {
    open: true, // 是否在浏览器中自动打开
    port: 8081, // 设置端口号
    host: '127.0.0.1', // 设置访问地址
    historyApiFallback: true, // 访问不存在的路由时进行重定向
    proxy: {
      // 反向代理
      "/mock": { // 代理的前缀标识
        target: "https://m.lagou.com", //请求的服务
        changeOrigin: true,
        pathRewrite: {
          "^/mock": ""
        }
      }
    }
  },  
}

demo

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  mode: "development", // 开发模式/生产模式 默认是生产
  entry: "./src/main.js", // 对象(多入口多输出)，数组（多入口，单输出），字符串（单入口，单输出）
  output: {
    filename: "index.js",
    path: __dirname + "/dist"
  }
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./public/index.html", // 指定模板地址 将模板复制一份放入dist文件，并引入打包后的js文件
			filename: "index.html", // 打包后的文件的名字
      inject: "body" || 'head' || true || false, // 打包后的html是否引入js文件，或引入js文件的位置, 默认为true
      chunks: ["one","two"], // 多出口时 指定html引入哪些出口文件
      excludeChunks: ["one","two"], // 多出口时，指定html过滤掉那些出口文件, 默认不设置时引入所有输出文件
      title: "学习webpack", // 需要配合模板语法来使用 <%= htmlWebpackPlugin.options.title%>
      minify: {
        removeCommonts: true, // 清除注释
        removeAttributeQuotes: true, // 移除双引号
        removeEmptyElements: true, // 删除空元素
        collapseWhitespace: true, // 进行折叠去除空格
        //......
      }, // 压缩的一些设置
    }),
    new ExtractTextPlugin("css/styles.css"), // 指定分离后的css文件路径 需要配合module下rules下ExtractTextPlugin.extract({})来使用
  ],
    module: {
    // 加载转换. css less sass 图片jsx react es6
    rules: [
      {
        test: /.\.css$/, //医生的药房，道士的画符，程序员正则，天下三大奇闻。
        // npm install style-loader css-loader -D
        // loader: ["style-loader","css-loader"], //加载css然后将css放置到style标签中
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      {
        // npm i less-loader less -D
        // 将less转换为css并加载转换后的css到style
        test: /.\.less$/,
        // loader: ["style-loader","css-loader","less-loader"],
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader","less-loader"]
        })
      },
      {
        // npm i sass-loader node-sass -D
        test: /.\.scss$/,
        // loader: ["style-loader","css-loader","sass-loader"]
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader","sass-loader"]
        })
      },
      {
        // npm i url-loader file-loader -D
        test: /.\.(jpg|jpeg|gif|svg)$/,
        // loader: ["url-loader"],
        use: [
          {
            loader: "url-loader",
            query: {
              limit: "1844560", // 指定图片的大小，当图片字节小于该值时，转换成base64,当图片字节小于该值时，需要安装file-loader
              outputPath: "img", //指定图片放置的文件夹
            }
          }
        ]
      },
      {
        // npm install babel-loader babel-core babel-preset-react babel-preset-env
        test: /.\.(js|jsx)/,
        exclude: /node_modules/, // 排除指定的文件
        loader: "babel-loader",
        query: {
          presets: [
            "babel-preset-react",
            "babel-preset-env"
          ]
        }
      }
    ]
  },
  resolve: {
    extensions: [".js",".jsx"], //解决.jsx不识别的问题
  },
	devServer: {
    open: true, // 是否在浏览器中自动打开
    port: 8081, // 设置端口号
    host: '127.0.0.1', // 设置访问地址
    historyApiFallback: true, // 访问不存在的路由时进行重定向
    proxy: {
      // 反向代理
      "/mock": { // 代理的前缀标识
        target: "https://m.lagou.com", //请求的服务
        changeOrigin: true,
        pathRewrite: {
          "^/mock": ""
        }
      }
    }
  },  
}

笔记地址：

https://github.com/18291907191/webpack

Webpack

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

vue中引入图片上一篇

Nginx基本配置下一篇

Webpack基础篇