目录结构:

新建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配置入口出口文件的更多相关文章

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

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

  2. webpack webpack.config.js配置

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

  3. 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 一. 问题描述 在 ...

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

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

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

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

  6. webpack.config.js====引入Jquery库文件

    1. 安装 cnpm install --save jquery expose-loader 2. 在webpack.config.js中配置 Jquery库是使用的webpack的一个插件Provi ...

  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====entry入口文件的配置

    1.  一般是采用对象语法: entry: { index: './src/default/js/index.js' }, https://webpack.css88.com/concepts/ent ...

  9. webpack.config.js配置实例

    const path = require('path') const HtmlWebPackPlugin = require('html-webpack-plugin') // 导入 在内存中自动生成 ...

随机推荐

  1. vue路由vue-router的安装和使用

    1.安装,如果你没有在创建项目时候选择的情况下  cnpm install vue-router 2.使用    假设App为根组件,两个自定义组件home及list main.js里操作 impor ...

  2. (转)用Flink取代Spark Streaming!知乎实时数仓架构演进

    转:https://mp.weixin.qq.com/s/e8lsGyl8oVtfg6HhXyIe4A AI 前线导读:“数据智能” (Data Intelligence) 有一个必须且基础的环节,就 ...

  3. (转)cat > file << EOF 的用法

    转:https://www.cnblogs.com/chenjingchao/p/6259572.html cat> 文件名<<eof 用来创建文件在这之后输入任何东西 都是在 文件 ...

  4. 12.定义Lock类,用于锁定数据.三步走,锁的优缺点

    #在threading模块当中定义了一个Lock类,可以方便的使用锁定: # #1.创建锁 # mutex = threading.Lock() # # #2.锁定 ''' mutex.acquire ...

  5. HTML5-新增type属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. java序列化的相关介绍

    1.什么是序列化?为什么要用序列化? 序列化就是将对象状态转换为可保持或传输的格式的过程.与序列化相对的就是反序列化,他将流转换成对象.这两个过程结合起来,可以轻松地存储和传输数据. 注意:对象序列化 ...

  7. java_第一年_JavaWeb(6)

    会话 会话:浏览器从打开一个进程访问服务器到该浏览器关闭,我们称之为一个会话: 在浏览器和服务器交互期间,会不可避免地产生一些数据,而为了为每个用户保存其对应的数据,可使用两种技术:Cookie和Se ...

  8. Manacher(最长递减回文串)

    http://acm.hdu.edu.cn/showproblem.php?pid=4513 Problem Description 吉哥又想出了一个新的完美队形游戏! 假设有n个人按顺序站在他的面前 ...

  9. memset 初始化数组 & 实现原理

    初始化数组可不必使用n重for循环. 原理 memset具有初始化数组的功能,能够初始化数组中的每一个值. 它是将数组中的每一个数的二进制的每一个字节初始化的. 比如初始化int类型的a数组:mems ...

  10. 左侧菜单收缩的实现(包括,筛选器,addclass、removeclass、绑定事件,链式编程)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...