目录结构:

新建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. 提高Service优先级

    在onStartCommand()方法中开启一个通知,提高进程的优先级.注意:从Android 8.0(API级别26)开始,所有通知必须要分配一个渠道,对于每个渠道,可以单独设置视觉和听觉行为.然后 ...

  2. react-native 异常处理 Execution failed for task ':app:mergeDebugResources'.

    1.react-native run-android 失败 * What went wrong:Execution failed for task ':app:mergeDebugResources' ...

  3. 设计模式 - 装饰器模式(Decorator)

    简介 场景 通过继承和关联都可以给对象增加行为,区别如下: 继承是静态的(无法在程序运行时动态扩展),且作用于所有子类.硬编码,高耦合. 通过装饰器可以在运行时添加行为和属性到指定对象.关联关系就是在 ...

  4. 【Unity系统知识】之unity文件操作路径

    IOS:Application.dataPath :                      Application/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/xxx ...

  5. CompletionService用法踩坑解决优化

    转自:https://blog.csdn.net/xiao__miao/article/details/86352380 1.近期工作的时候,运维通知一个系统的内存一直在增长,leader叫我去排查, ...

  6. java_第一年_JavaWeb(6)

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

  7. 验证客户端的合法性、socketserver模块

    一.为了防止客户端被人非法利用,需要在使用之前对客户端进行合法性验证.接下来就是客户端验证的几种方法 hmac  加密方法 import socket import os import hmac #能 ...

  8. KindEditor 文本编辑器

    官网:http://kindeditor.net/docs/usage.html 目前支持ASP.ASP.NET.PHP.JSP.

  9. jquery+ajax获取本地json对应数据

    首先,记得导入jquery.js文件. json内容: var obj123=[        {"option":"2,3,9,14,19,24,32",&q ...

  10. JS window对象 返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL。 语法: window.history.back();

    返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL. 语法: window.history.back(); 比如,返回前一个浏览的页面,代码如下: window.hi ...