const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin') // 导入 在内存中自动生成 index 页面的插件
// 创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
template: path.join(__dirname, './src/index.html'), // 源文件
filename: 'index.html' // 生成的内存中首页的名称
})
// 向外暴露一个打包的配置对象; 因为 webpack 是基于Node构建的;所以 webpack 支持所有Node API 和语法
// webpack 默认只能打包处理 .js 后缀名类型的文件; 像 .png .vue 无法主动处理,所以要配置第三方的loader;
module.exports = {
mode: 'development', // development production
// 在 webpack 4.x 中,有一个很大的特性,就是 约定大于配置 约定,默认的打包入口路径是 src -> index.js
plugins: [
htmlPlugin
],
module: { // 所有第三方 模块的配置规则
rules: [ // 第三方匹配规则
{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }, // 千万别忘记添加 exclude 排除项
]
},
resolve: {
extensions: ['.js', '.jsx', '.json'], // 表示,这几个文件的后缀名,可以省略不写
alias: { // 表示别名
'@': path.join(__dirname, './src') // 这样,@ 就表示 项目根目录中 src 的这一层路径
}
}
}
// 行不行 ? 目前不行; // 这是 ES6 中 向外导出模块的API 与之对应的 是 import ** from '标识符'
// export default {}
// 那些 特性 Node 支持呢? 如果 chrome 浏览器支持哪些,则 Node 就支持哪些;

webpack.config.js配置实例的更多相关文章

  1. webpack.config.js配置信息的说明

    module.exports = { entry: "./src/main.js", output: { filename: "build/build.js" ...

  2. webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 问题

    下文是网上找到的方法,是因为版本冲突的原因,参照后安装7版本解决 cnpm install -D babel-loader@ babel-core babel-preset-env 一. 问题描述 在 ...

  3. webpack.config.js====配置babel

    参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...

  4. webpack webpack.config.js配置

    安装指定版本的webpack npm install webpack@3.6 -g 安装live-server    运行项目插件   输入live-server  运行后自动打开网页 npm ins ...

  5. webpack.config.js配置入口出口文件

    目录结构: 新建webpack.config.js配置文件 const path = require('path') //导出 path是node内置的包 通过npm init初始化得到package ...

  6. webpack(4)webpack.config.js配置和package.json配置

    前言 上一篇文章我们使用webpack打包成功了,但是每次都要自己手动输入打包的文件地址和打包到哪里去的地址,非常麻烦,所以这里介绍使用配置文件进行打包 webpack.config.js 首先我们创 ...

  7. vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析

    1.下载vue-cli npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取https://github.com/vuejs/vue-cli 2.安装 ...

  8. webpack.config.js配置遇到Error: Cannot find module '@babel/core'问题

    在webpack配置,将ES6转成ES5的时候,,出现Error: Cannot find module '@babel/core'错误最初以为是babel-core没有安装上.重装了好几遍babel ...

  9. 关于自己配置有关webpack.config.js和vue项目搭建相关步骤

    ## Webpack的配置和使用 ### 安装 1. 全局安装 ``` npm install webpack -g ``` 2. 本地安装 ``` npm install webpack -D `` ...

随机推荐

  1. Python识别璇玑图中诗的数量

    一.璇玑图简介 璇玑图的读法有很多,这里我使用七七棋盘格的读法,在璇玑图中分离出一个七七棋盘格,如下表 吏 官 同 流 污 合 玩 痞 悍 蒙 骗 造 假 蛋 鸡 宴 请 客 友 朋 远 戚 偏 正 ...

  2. 【MySQL】Illegal mix of collations (utf8mb4_general_ci,IMPLICIT) and ...

    线上遇到这个问题,详细信息如下: SQL state [HY000]; error code [1267]; Illegal mix of collations (utf8mb4_general_ci ...

  3. 【iOS】UIImage 等比率缩放

    这两天处理引导页面的时候遇到了图片略大的问题,上网查找后找到了解决方法.用的是 UIImage 的等比率缩放,虽然不难,但之前没接触过,故记之. 代码如下: - (UIImage *)scaleIma ...

  4. Log4Net 配置日志按日期和日志级别分类写入

    配置效果图: 配置代码: <?xml version="1.0" encoding="utf-8" ?> <log4net> <! ...

  5. golang文档、中文、学习文档

    Golang中文文档地址 http://zh-golang.appspot.com/doc/ Golang非英文文档地址: https://github.com/golang/go/wiki/NonE ...

  6. host配置

    host添加地址 今天是我第一天入职,坐到工位的第一件事就是配置host,因为连接测试环境需要本地授权,所以要配置.这里简单记录下配置中遇到的问题和操作的步骤 操作环境是win10,之前公司一直使用的 ...

  7. kubeadm定制化开发,延长证书

    kubernetes离线安装包,仅需三步 修改kubeadm证书过期时间 本文通过修改kubeadm源码让kubeadm默认的一年证书过期时间修改为99年 我已经编译好了一个放在了github上,有需 ...

  8. LR有的JMeter也有之三“集合点”

    继续上两篇的文章内容和思路进行.(文思如尿崩,谁与我争锋----韩寒)哈哈! 集合点:简单来理解一下,虽然我们的“性能测试”理解为“多用户并发测试”,但真正的并发是不存在的,为了更真实的实现并发这感念 ...

  9. k8s学习02-----kubeadm部署k8s

    机器规划 系统配置 三台机器都执行 1.关闭selinux及firewalld sed -i 's/SELINUX=enforcing/SELINUX=disabled/g' /etc/selinux ...

  10. 【Java例题】6.2 日期类的使用

    2.日期类的使用.显示今天的年月日.时分秒和毫秒数.显示今天是星期几.是今年内的第几天.显示本月共几天,今年是不是闰年.显示两个日期的差,包括年月日.时分秒和毫秒差值. package chapter ...