3 mustache webpack搭建开发环境

使用webpack搭建构建工具

 

 

npm init -y

npm i webpack@4 webpack-cli@3 webpack-dev-server@3 html-webpack-plugin -D

npm i mustache -S

 

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //引入
module.exports = {
  entry: path.resolve(__dirname, "src/index.js"), // 打包入口文件绝对路径
  output: {
    path: path.resolve(__dirname, "build"), // 输出文件夹绝对路径 D:\00code\11webpack\build
    filename: "js/built.js", //输出文件名
  },

  // 插件配置 下载=》引入=》使用
  plugins: [
    // new HtmlWebpackPlugin()  默认会创建一个空基本结构的html文件，自动引入打包输出（bundle也就是output输出的filename）后的所有资源
    new HtmlWebpackPlugin({
      filename: "index.html", //指定生成html文件名，默认是index.html
      template: path.resolve(__dirname, "src/index.html"), //全盘复制./src/index.html里面所有内容（指定模板页面），并且自动引入打包输出（bundle也就是output输出的filename）后的所有资源
    }),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, "build"), //项目构建后的路径
    open: true, //自动打开浏览器
    port: 4000, //端口
    compress: true, //启动gzip压缩
  },
  //模式
  mode: "development", //development production
};

resolve: {

    alias: {

      "@": path.resolve(__dirname, "src"),

    },

  },

补充配置别名

package.json

"scripts": {
    "serve": "webpack-dev-server"
  },