webpack基础(二)核心概念

webpack的配置文件一般在项目的根目录文件下。默认的文件名称为webpack.config.js。如果需要更改打包文件需要的package.json文件中指定打包文件

 "dev": "webpack --config ./webpack.a.js"

webpack核心概念

• entry（输入文件）
  entry 支持字符，数组和对象
  entry:"./src/index" 入口文件在src目录下的index
  entry:['./src/index','./src/a'] entry 如果是数组的话，那么会把数组文 件中的文件打包合并
  entry:为对象的时候，会打包成对象的key为单位，打包相应的文件，同时需要在输出（output）那么使用[name]标识，不然会出现打包错误 filename: "[name].js"
• output （输出文件）
• 输出文件为一个对象，对象中有两个基本数据path,file
  path表示输出文件的目录，在默认配置中为根目录下的dist文件（./dist）
  filename:表示文件在bundle之后保存文件的名称。默认为main.js
  如果多个入口文件，那么需要使用[name]占位符号，name表示entry为多入口的时候，键的名称
• mode（模式）
  代表打包模式,一般开发中使用开发模式，上线使用生产模式（production） 生产模式会对代码进行压缩
  -loader
  配置loader的位置，一般需要使用npm添加loader 然后配置loader，如果使用除.js .json文件没有配置相关的loader会出现打
  出错的情况

   module:{
        rules:[
            // 配置loader的位置，一般需要使用npm添加loader 然后配置loader，如果使用除.js .json文件没有配置相关的loader会出现打
            // 出错的情况
            // 
           {
               test:/\.css$/, //正则表达式，表示所有已.css结尾的文件都会被css-loader 和stle-loader文件处理
            //    use可以适应字符串数组，也可以使用对象数组。多个loader的情况下，执行顺序是自后往前的，即先用css-loader
            // 处理，然后在用style-loader处理
               use:["style-loader","css-loader"]
           } 
        ]
    },

-plugins(插件)

 plugins:[
        // 插件使用
        // 先引入插件，然后在使用插件
        // 这个插件表示已./src/index.html 为模板,打包生成的文件名称为index.html
        new htmlwebpackplugin({
            template: "./src/index.html",
            filename: "index.html",
          }),
    ]