webpack.config.js配置入口出口文件
目录结构:

新建webpack.config.js配置文件
const path = require('path') //导出 path是node内置的包 通过npm init初始化得到package.json
module.exports = { //导出入口和出口路径
entry: './src/main.js', //入口文件
output: { // 动态获取路径
path: path.resolve(__dirname, 'dist'), // resolve拼接路径 __dirname是node自带全局变量,保存现在项目的路径
filename: 'bundle.js'
},
//模块:例如解读CSS,图片如何转换,压缩
module:{
},
//插件,用于生产模版和各项功能
plugins:[
],
//配置webpack开发服务功能
devServer:{
}
}
npm init初始化得到package.json依赖项文件
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //打包命令映射 npm run build 执行的是webpack命令
},
"author": "",
"license": "ISC"
}
打包命令:
npm run build
webpack.config.js配置入口出口文件的更多相关文章
- webpack(4)webpack.config.js配置和package.json配置
前言 上一篇文章我们使用webpack打包成功了,但是每次都要自己手动输入打包的文件地址和打包到哪里去的地址,非常麻烦,所以这里介绍使用配置文件进行打包 webpack.config.js 首先我们创 ...
- webpack webpack.config.js配置
安装指定版本的webpack npm install webpack@3.6 -g 安装live-server 运行项目插件 输入live-server 运行后自动打开网页 npm ins ...
- 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 一. 问题描述 在 ...
- webpack.config.js====配置babel
参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...
- webpack.config.js配置信息的说明
module.exports = { entry: "./src/main.js", output: { filename: "build/build.js" ...
- webpack.config.js====引入Jquery库文件
1. 安装 cnpm install --save jquery expose-loader 2. 在webpack.config.js中配置 Jquery库是使用的webpack的一个插件Provi ...
- 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.安装 ...
- webpack.config.js====entry入口文件的配置
1. 一般是采用对象语法: entry: { index: './src/default/js/index.js' }, https://webpack.css88.com/concepts/ent ...
- webpack.config.js配置实例
const path = require('path') const HtmlWebPackPlugin = require('html-webpack-plugin') // 导入 在内存中自动生成 ...
随机推荐
- vue路由vue-router的安装和使用
1.安装,如果你没有在创建项目时候选择的情况下 cnpm install vue-router 2.使用 假设App为根组件,两个自定义组件home及list main.js里操作 impor ...
- (转)用Flink取代Spark Streaming!知乎实时数仓架构演进
转:https://mp.weixin.qq.com/s/e8lsGyl8oVtfg6HhXyIe4A AI 前线导读:“数据智能” (Data Intelligence) 有一个必须且基础的环节,就 ...
- (转)cat > file << EOF 的用法
转:https://www.cnblogs.com/chenjingchao/p/6259572.html cat> 文件名<<eof 用来创建文件在这之后输入任何东西 都是在 文件 ...
- 12.定义Lock类,用于锁定数据.三步走,锁的优缺点
#在threading模块当中定义了一个Lock类,可以方便的使用锁定: # #1.创建锁 # mutex = threading.Lock() # # #2.锁定 ''' mutex.acquire ...
- HTML5-新增type属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- java序列化的相关介绍
1.什么是序列化?为什么要用序列化? 序列化就是将对象状态转换为可保持或传输的格式的过程.与序列化相对的就是反序列化,他将流转换成对象.这两个过程结合起来,可以轻松地存储和传输数据. 注意:对象序列化 ...
- java_第一年_JavaWeb(6)
会话 会话:浏览器从打开一个进程访问服务器到该浏览器关闭,我们称之为一个会话: 在浏览器和服务器交互期间,会不可避免地产生一些数据,而为了为每个用户保存其对应的数据,可使用两种技术:Cookie和Se ...
- Manacher(最长递减回文串)
http://acm.hdu.edu.cn/showproblem.php?pid=4513 Problem Description 吉哥又想出了一个新的完美队形游戏! 假设有n个人按顺序站在他的面前 ...
- memset 初始化数组 & 实现原理
初始化数组可不必使用n重for循环. 原理 memset具有初始化数组的功能,能够初始化数组中的每一个值. 它是将数组中的每一个数的二进制的每一个字节初始化的. 比如初始化int类型的a数组:mems ...
- 左侧菜单收缩的实现(包括,筛选器,addclass、removeclass、绑定事件,链式编程)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...