webpack基础知识.

webpack是什么?

webpack是一个模块打包工具,他的存在使前端工程化,自动化变为可能.

基本常识

使用前需要安装webpack 和webpack-cli;webpack默认只能试别json,javascript文件.

webpack原理就是通过shell脚本在node_modules/.bin⽬录下创建⼀个软链接。

  module.exports = {
      // 必填 webpack执⾏构建⼊⼝ 可以是array,string,obj.
      //数组表示多个文件打包成一个文件,obj,表示多个文件打包成多个文件.
      entry: "./src/index.js",
      output: {
        // 将所有依赖的模块合并输出到main.js
        filename: "[name][chunkhash:8].js", //输出的文件名  [name]是占位符
        // 输出⽂件的存放路径，必须是绝对路径
        path: path.resolve(__dirname, "./dist")
      },
      mode: "production", //打包环境
      module: {
        rules: [
          //loader模块处理
          {
            test: /\.css$/,
            use: "style-loader"
          }
        ]
      },
      plugins: [new HtmlWebpackPlugin()] //插件配置
    };

rules --use 使用loader是从右到左执行的. 严格遵守一个loader只干一件事情的标准.

几个重要的字段

• mode 设置打包模式有production development none 等.
  他们会调用pross.env 所定义不同环境的插件

• loader:主要作用是解析js.json以外的格式的文件.

 module: {
      rules: [
        {
          test: /\.xxx$/,//指定匹配规则
          use: {
            loader: 'xxx-load'//指定使⽤的loader 可以是数组.数组的化从右到左执行.
          }
        }
      ]
    }

• plugins :主要作用是让用户能在webpack打包时的生命周期执行想要执行的逻辑.作用于整个构建过程

例如:HtmlWebpackPlugin
htmlwebpackplugin会在打包结束后，⾃动⽣成⼀个html⽂件，并把打包⽣成的js模块引⼊到该html中。

npx 走的是当前项目node-moudles下的软连接