path是node.js里面的需求语法,需要引出

const path = require("path");

引入插件

const HtmlWebpackPlugin = require("html-webpack-plugin"); //需求,导入

实例化插件

const htmlPlguin = new HtmlWebpackPlugin({

  template: "./src/index.html", //模板  也就是说要复制的文件

  filename: "index.html", //filename是文件名的意思  就是复制的文件的名称

});

module.exports = {

  //编译模式

  mode: "production",

  //development开发阶段     production最终产品

  // __dirname代表当前文件所处的目录

  entry: path.join(__dirname, "./src/index.js"), //入口文件      这里必须加./  不然无法识别

  output: {

    path: path.join(__dirname, "./dist"), //输出文件的存放路径

    filename: "bundle.js", //输出文件的名称

  },

  plugins: [htmlPlguin], //plugins插件的意思

  module: {

这里是加载器,用正则表达式所有css文件可以被打包.加载器从右到左,从上到下执行. 

图片打包css用url-loader加载器,但是必须依赖于file-loader.   html中的图片 用html-withimg-loader 加载器处理

    

    rules: [{ test: /\.css$/, use: ["style-loader", "css-loader"] }],

  },

};

 

webpack因为加载器版本的问题不容易兼容,一般自己单独配置. 一般用脚手架,脚手架就是基于webpack的,配置都是现成的,兼容性好,不冲突