webpack4文件配置

1.初始化项目结构，生成package.json文件

npm init -y

2.使用webpack所需要的一些插件

//webpack插件
"webpack": "^4.46.0",
//webpack命令插件
"webpack-cli": "^3.3.12",
//webpage拷贝插件
"copy-webpack-plugin": "^6.4.1",
//webpack的html生成插件
"html-webpack-plugin": "^4.5.1",
//webpack静态服务插件
"webpack-dev-server": "^3.11.2"
//art模板和模板加载插件
"art-template":"^4.13.2"
"art-template-loader":"^1.4.3"
//用于清除因配置hash名而产生上次生成的同样文件
"clean-webpack-plugin":"^3.0.0"
//用于对于js中import引入的css做解析
"css-loader":"^5.0.2"
"style-loader":"^1.3.0"
//页面用bootstrap框架
 "bootstrap": "^4.6.0",
// 基于jquery
  "jquery": "^3.5.1",

3.创建一个webpack.config.json文件

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CopyPlugin = require("copy-webpack-plugin");
var {CleanWebpackPlugin}=require("clean-webpack-plugin");
module.exports = {
  // 开发环境或者生产环境
  mode: "development",
  // 生成map映射文件，当项目被打包后会压缩，
  // 有这个map文件就可以更精准的知道是哪个地方出现了错误
  devtool: "source-map",
  // 入口，在整个html页面中执行的入口js文件
  //前面是编译过的地址，后面是编译前的地址
  entry: {
     "js/app": "./src/app.js"
  },
  // 出口配置，自动生成压缩后的文件夹
  output: {
    // 输出路径
    path: path.join(__dirname, "./dist"),
    // 输出生成的js文件,在这里[name]是原文件名是什么就导出对应的名字
    //[hash:6] 自动增加尾缀hash值用来区分上一次的文件，减少因为缓存引入上次的文件问题
    filename: "[name]-[hash:6].js"
  },
  //模块
  module: {
    rules: [
       //配置art-template-loader模块，用于加载所有.art的文件并且根据需求加载完成后解析
      { test: /\.art$/, use: { loader: "art-template-loader" } },
      //配置CSS文件的import引入和解析
      { test: /\.css$/i,use: ["style-loader", "css-loader"] }
    ]
  },
  // webpage提供的插件
  plugins: [
    // 用于自动构建html页面的插件
    new HtmlWebpackPlugin({
      // 网页源目录
      template: path.join(__dirname, "./public/index.html"),
      // 目标文件名
      app: "index.html",
      // 注入，如果不设定这个就会造成源html内容丢失
      inject: true
    }),
    // 用于复制源文件夹中指定的文件
    new CopyPlugin({
      // 插件配置  from从某文件夹复制，to到某文件夹
       patterns: [
        { "from": "./public/img", "to": path.join(__dirname, "./dist/img/") },
        { "from": "./public/css", "to": path.join(__dirname, "./dist/css/") },
        { "from": "./public/js", "to": path.join(__dirname, "./dist/js/") },
        { "from": "./public/fonts", "to": path.join(__dirname, "./dist/fonts/") }
      ]
    }),
    //清除上次因为使用hash名称产生的相同文件   "[name]-[hash:6].js"这里配置造成
    new CleanWebpackPlugin()
  ],
  // 设置服务配置，开启静态服务
  devServer: {
    // 目标静态服务器地址指向的文件夹
    contentBase: path.join(__dirname, "./dist"),
    // 端口号
    port: 4001,
    //设置代理服务，解决跨域问题
    proxy:{
       "/api":{
          target:"http://localhost:3000"
       }
    }
  }
}

4.配置package.json文件里的script模块中的命令

"scripts": {
    //用于执行webpack打包项目
    "build": "npx webpack",
    //用于打包并开启webpack静态服务
    "dev": "npx webpack-dev-server"
  }

5.网页中的静态路径配置如下

public
  --img
  --css
src
  --views
  --app.js