临时存放(webpack工程化运行流程)

时间:2021-08-06
本文章向大家介绍临时存放(webpack工程化运行流程),主要包括临时存放(webpack工程化运行流程)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
附:webpack用法与示例
polyfill 兜底。在计算机中,变相实现不能直接实现的操作。
process 对象是一个 global 变量,提供有关当前 Node.js 进程的信息并对其进行控制。
1、可以缩写的npm命令
(1)npm start是npm run start
(2)npm stop是npm run stop的简写
(3)npm test是npm run test的简写
2、webpack-dev-server各配置的含义
(1)inline:(默认)启用实时重新加载
(2)progress:将运行进度输出到控制台
(3)config:webpack-dev-server应执行后面的配置文件
(4)fs.exists方法中参数path默认是从根目录(启动位置)开始查找的
3、文件存放
(1)index:模板
(2)assetsRoot:打包后文件存放的路径
(3)assetsSubDirectory:除了index.html之外的静态资源要存放的路径
(4)assetsPublicPath:代表打包后,index.html里面引用资源的相对地址
4、
function resolve(dir) {
  return path.join(__dirname, "..", dir);
}
6、示例
module.exports = {
  proxyTarge: "http://192.168.10.231:8081/",
  host: "localhost",
  port: "7770",
};
module.exports = {
  context: path.resolve(__dirname, "../"),
  //默认情况下使用当前目录,这个配置使你的配置独立于 CWD(当前工作目录)。
  entry: {
    app: "./src/main.js",
    report: "./src/main-report.js",
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    //path是webpack所有文件的输出的路径,必须是绝对路径
    filename: "[name].js",
    //filename指定输出文件的名称
    publicPath: process.env.NODE_ENV === "production" ? '/' : '/../',
    //publicPath添加到css、html文件里的url的前面
  },
  resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
      "@": resolve("src"),
      //本工程下,所有路径中的@都等同于后者解析出来的路径
    },
  },
  module: {
    rules: [],
  },
  plugins: [new VueLoaderPlugin()],
  node: {
    setImmediate: false,
    child_process: "empty",
  },
  mode: "development",
  //告知 webpack 使用相应模式
  module: {
    rules: utils.styleLoaders({
      sourceMap: true,
      usePostCSS: true,
    }),
  },
  devtool: "cheap-source-map",
  //选择一种 source map 格式来增强调试过程。
  //Source map是一个信息文件,里面储存着位置信息。转换后的代码的每一个位置,所对应的转换前的位置。
  //cheap-module-eval-source-map is faster for development
  //these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: "warning",
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: "localhost",
    port: "7770",
    open: false,
    overlay:{
      warnings: false,
      errors: true,
    },
    publicPath: "/",
    proxy: {
      "/app": {
        target: "http://192.168.10.231:8081/", // 目标接口域名
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          "^/app": "/", // 重写接口
        },
      },
      "/dist": {
        target: "http://localhost:7770/", // 目标接口域名
        changeOrigin: false, // 是否跨域
        pathRewrite: {
          "^/dist": "/", // 重写接口
        },
      },
    },
    quiet: true,
    watchOptions: {
      poll: config.dev.poll,
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": require("../config/dev.env"),
    }),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "index.html",
      inject: true,
      favicon: resolve("favicon.ico"),
      title: "统一安全管理平台",
      chunks: ["manifest", "vendor", "app"],//引入entry对应的入口文件
    }),
    new HtmlWebpackPlugin({
      filename: "report-index.html",
      template: "report-index.html",
      title: "报表管理",
      favicon: resolve("favicon.ico"),
      inject: true,
      chunks: ["manifest", "vendor", "report"],
    }),
  ],
};

原文地址:https://www.cnblogs.com/gushixianqiancheng/p/15108115.html