webpack 手动创建项目
前言:
webpack作为当前算是比较流行的打包工具之一，通过设置入口文件开始会把入口文件所依赖的所有文件(js,css,image等)进行对应的打包处理，其实现当时真的是很独特。现在流行的脚手架工具(vue-cli等)很大程度上提高了开发项目的效率，但同时会使得开发人员不能深入了解webpack的创建项目的流程，莫着急，希望能帮助您从疑惑中走出来。
1. 先创建一系列的文件夹和文件，如下
项目名: demo
2. 编写对应的文件
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack demo</title>
</head>
<body>
<div id="root"></div>
<!-- 下面为什么需要引入这个js,稍后会给你讲解原因的，不要着急 -->
<script src="bundle.js"></script>
</body>
</html>
// hello.js
export function createDivElement() {
var div = document.createElement('div');
div.textContent = 'hello world';
return div;
}
// main.js
import {createDivElement} from './hello'; // es6语法
document.getElementById('root').appendChild(createDivElement());
3. package.js(有同学可能会直接创建，别急，通过命令-npm init,然后修改对应信息，我就是全部回车)
// package.json
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
4. 安装webpack webpack-cli(webpack4以上的需要安装)- npm i --save-dev webpack webpack-cli cross-dev
说明: 会多两个文件package.json和package-locak.json,具体有什么不同可参考：客官不要着急，小店后续将会添加该菜品的
为什么会需要安装cross-dev这个包，具体的可参考: https://www.cnblogs.com/yincece0316/p/12391534.html
// package.json
{
...
// 命令后的依赖项开发环境需要依赖
"devDependencies": {
"cross-env": "^7.0.0",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11"
}
}
5. 手动创建一个webpack.config.js文件(用户保存webpack打包时的配置)
// webpack.config.js
module.exports = {
// 告诉webpack从哪个文件开始打包
entry: './src/main.js',
// 告诉webpack打包后的文件叫啥，放到哪里
output: {
filename: 'bundle.js',
// __dirname是nodejs的全局变量用户获取当前文件的路径地址
path: __dirname + '/public'
}
}
莫着急，马上你就能成功了。。。
6. 创建打包命令，一般的自定义的命令会在package.json的scripts中去配置
// package.json
{
...
"scripts": {
...
// 新增该命令
"build": "cross-env NODE_ENV=development webpack --mode development --config webpack.config.js --process"
},
...
}
见证奇迹的时刻了。。
7. 控制台输入npm run build 注意啦，public会多出来一个bundle.js的文件，怎么来的呢。。下面第二张图中配置而来的
8. 此时直接通过浏览器打开index.html，是不是看到如下效果了，如果看不到的话检查下是不是哪一步出现了问题，相信你是最棒的
谢谢客官的品尝，如有不严谨和错误地方请希望指正，祝大家工作顺利 ！
webpack 手动创建项目的更多相关文章
- 51.webpack vue-cli创建项目
在上两篇博文中已经安装了node.js.webpack.vue-cli,安装的版本为: 今天通过这篇博文创建项目. 1.选择路径 首先通过命令行进入想要创建项目的路径,例如: 通过e:命令进入盘幅,再 ...
- SpringBoot 2.x （1）：手动创建项目与自动创建项目
SpringBoot 2.x基于Spring Framework 5.x 环境需求如下: JDK1.8或以上 Maven3.2或以上 这里我使用的是Eclipse,IDEA这个工具很强大,但不习惯它 ...
- vue 使用cli脚手架手动创建项目 相关的选择配置及真正项目的开始
转载https://www.jianshu.com/p/635bd3ab7383 根据上述连接将基本的环境和命令和装好 使用命令行 vue create 项目名称 出现选项 选择手动(没有截图展 ...
- Vue脚手架创建项目出现 (Failed to download repo vuejs-templates/webpack: Response code 404)
搭建好(脚手架2.X版本)环境像往常一样使用vue init webpack xxxx 创建项目可以是没多久就开始报错了 报错结果就是:vue-cli · Failed to download rep ...
- vue-cli3安装创建项目以及目录结构
安装脚手架cli3.0 全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli 查看版本/是否安装成功 vue -V 如果你仍然需要使用旧版本的 ...
- Vue Cli 3：创建项目
一 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分. 1 CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.(vue ...
- maven学习(1)下载和安装和初步使用（手动构建项目和自动构建项目）
1:背景 关于项目的搭建,有些人使用开发工具搭建项目,然后将项目所依赖第三方jar 复制到类路径下面,上述搭建方式没有第三方类库的依赖关系,在导入一个jar包的时候,这个jar包还可能依赖其他jar包 ...
- Vue创建项目及基本语法 一
目录 目录: 一.创建Vue项目 0.使用环境要求及说明 1.使用命令创建项目 2.启动项目 二.简单指令 1.变量: 2.动态绑定变量值 3.v-once指令 4.v-html解析html 5.v- ...
- Maven 系列 二 ：Maven 常用命令，手动创建第一个 Maven 项目【转】
1.根据 Maven 的约定,我们在D盘根目录手动创建如下目录及文件结构: 2.打开 pom.xml 文件,添加如下内容: <project xmlns="http://maven.a ...
随机推荐
- soupUI解决md5加密签名，cookie传递
问题详情: 1.接口调用需要前提状态:登录状态(cookie) 2.接口请求需要签名,签名规则为:MD5(TokenKey+apikey+timestamp+nonc) 其中 1.TokenKey.a ...
- fibonacci-Heap（斐波那契堆）原理及C++代码实现
斐波那契堆是一种高级的堆结构,建议与二项堆一起食用效果更佳. 斐波那契堆是一个摊还性质的数据结构,很多堆操作在斐波那契堆上的摊还时间都很低,达到了θ(1)的程度,取最小值和删除操作的时间复杂度是O(l ...
- LGOJ4449 于神之怒加强版
Description link 给定\(n\),\(m\),\(k\),计算 \[\sum_ {i=1}^n \sum^m_{j=1} gcd(i,j)^k \space mod \space 10 ...
- 回归分析|r^2|Se|变差|多重相关系数|决定系数|多重共线性|容忍度|VIF|forward selection|backward elimination|stepwise regression procedure|best-subset approach|回归方程的置信区间|预测区间|残差分析|虚拟变量
应用统计学-回归分析 拟合度使用r^2和Se来检验. 显著性检验中,对于线性model使用ANOVA,对于单独的回归系数使用t检验. 最小二乘法.贝叶斯和最大似然都可用于求回归参数,最小二乘法是最小化 ...
- 74）PHP，Session的一些属性
(1) (2)有效期在 会话周期结束(就是将浏览器关闭前) (3)有效路径: 整站都有效 (4)有效域:当前域 (5)是否安全传输:否 (6)以上的session数据的特征都是由一个问题导致的,就 ...
- 数据结构与算法 python课后题（未完成）
挖一个坑,先立个flag,后面慢慢填坑. 先放个其它人写的链接
- verilog乘法器的设计
在verilog编程中,常数与寄存器变量的乘法综合出来的电路不同于寄存器变量乘以寄存器变量的综合电路.知乎里的解释非常好https://www.zhihu.com/question/45554104, ...
- maven命令-P 参数引发的思考
参考文档: https://blog.csdn.net/haiyuntai/article/details/53260191 谢谢原作者 maven 命令:clean package -Dmaven. ...
- RNA sequence单分子直测技术
生命组学 按照功能分类遗传物质,可能的分类有系统流.操作流.平衡流等等.下面是使用该理论解释DNA与RNA的关系: DNA和RNA有很大不同,DNA存储遗传信息,作为生命活动的最内核物质,如同操作系统 ...
- NEON优化之《简介》
NDK支持NEON环境配置:https://blog.csdn.net/app_12062011/article/details/50462351 一个很典型的例子:http://hilbert-sp ...