webpack基础配置

webpack基础配置
注意新的webpack 5在2020年10月发布，但是企业应用比较少因此我们使用webpack4

以下是需要下载的插件

//webpack拷贝插件
"copy-webpack-plugin": "^6.4.1",
//webpack的html生成插件
"html-webpack-plugin": "^4.5.1",
//webpack插件
"webpack": "^4.46.0",
//webpack命令插件
"webpack-cli": "^3.3.12",
//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",
//前端页面使用的router路由  
  "sme-router": "^0.12.8"

先创建一个webpack.config.js 具体内容如下

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"),
            // 目标文件名
            filename: "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"
            }
        }
    }
}

然后配置script中的命令

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

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

public
  img
  css
src
  views
  app.js