前言:

　　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 手动创建项目的更多相关文章

  1. 51.webpack vue-cli创建项目

    在上两篇博文中已经安装了node.js.webpack.vue-cli,安装的版本为: 今天通过这篇博文创建项目. 1.选择路径 首先通过命令行进入想要创建项目的路径,例如: 通过e:命令进入盘幅,再 ...

  2. SpringBoot 2.x （1）：手动创建项目与自动创建项目

    SpringBoot 2.x基于Spring Framework 5.x 环境需求如下: JDK1.8或以上 Maven3.2或以上 这里我使用的是Eclipse,IDEA这个工具很强大,但不习惯它 ...

  3. vue 使用cli脚手架手动创建项目 相关的选择配置及真正项目的开始

    转载https://www.jianshu.com/p/635bd3ab7383 根据上述连接将基本的环境和命令和装好 使用命令行  vue create 项目名称  出现选项  选择手动(没有截图展 ...

  4. Vue脚手架创建项目出现 (Failed to download repo vuejs-templates/webpack: Response code 404)

    搭建好(脚手架2.X版本)环境像往常一样使用vue init webpack xxxx 创建项目可以是没多久就开始报错了 报错结果就是:vue-cli · Failed to download rep ...

  5. vue-cli3安装创建项目以及目录结构

    安装脚手架cli3.0 全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli 查看版本/是否安装成功 vue -V 如果你仍然需要使用旧版本的 ...

  6. Vue Cli 3：创建项目

    一 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分. 1 CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.(vue ...

  7. maven学习(1)下载和安装和初步使用（手动构建项目和自动构建项目）

    1:背景 关于项目的搭建,有些人使用开发工具搭建项目,然后将项目所依赖第三方jar 复制到类路径下面,上述搭建方式没有第三方类库的依赖关系,在导入一个jar包的时候,这个jar包还可能依赖其他jar包 ...

  8. Vue创建项目及基本语法 一

    目录 目录: 一.创建Vue项目 0.使用环境要求及说明 1.使用命令创建项目 2.启动项目 二.简单指令 1.变量: 2.动态绑定变量值 3.v-once指令 4.v-html解析html 5.v- ...

  9. Maven 系列 二 ：Maven 常用命令，手动创建第一个 Maven 项目【转】

    1.根据 Maven 的约定,我们在D盘根目录手动创建如下目录及文件结构: 2.打开 pom.xml 文件,添加如下内容: <project xmlns="http://maven.a ...

随机推荐

  1. 1051: [HAOI2006]受欢迎的牛 （tarjan强连通分量+缩点）

    题目大意:CodeVs2822的简单版本 传送门 $Tarjan$强连通分量+缩点,若连通块的个数等于一则输出n:若缩点后图中出度为0的点个数为1,输出对应连通块内的点数:否则输出0: 代码中注释部分 ...

  2. 一、linux-mysql 运维DBA介绍

    一.DBA数据库管理人员需要在整个架构中解决数据库的压力,前端业务通过扩展,加机器就可以很好的解决,但是存储.数据库就不是很好的可以进行扩展,数据也是分配不均的,所以,1)通过在数据库前面添加Memc ...

  3. 吴裕雄--天生自然C语言开发：enum(枚举)

    enum DAY { MON=, TUE, WED, THU, FRI, SAT, SUN }; enum DAY { MON=, TUE, WED, THU, FRI, SAT, SUN }; en ...

  4. signal之——异步回收机制2

    前言:上一篇的处理方法可以解决所有回收问题,但是如果我们不考虑子进程的返回状态,那么可以使内核来进行对子进程的回收 代码如下: //如果无需关心进程结束状态 可以设置子进程结束时不产生僵尸进程有内核值 ...

  5. mysql命令运行sql文件

    navicat转储sql,cmd 打开运行 切换到mysql目录下:mysql -uroot -p  回车输入密码 创建数据库语句:  CREATE DATABASE `tcc` CHARACTER  ...

  6. 网站TDK三大标签SEO优化

    SEO(Search Engine Optimization)汉译为搜索引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索 引擎内自然排名的方式. SEO 的目的是对网站进行深度的优化,从而帮助网站 ...

  7. 吴裕雄--天生自然python学习笔记：python设置文档的格式

    Win32com 组件可为特定范围的内 容设置格式, 较常用的格式有标题格式.对齐 方式格式及字体格式 . 许多格式使用 常量表示 , 所 以 需先导入 constants常量模块 : 设置标题格式的 ...

  8. 对TD tree的使用体验及建议

    TDtree与QQ空间有着相似的功能,你可以在里面发表自己的感受与心情,也可以存储照片或者给喜欢的说说点赞.发表评论等,可以说这是一个将QQ空间从QQ里独立出来的软件.作为一个娱乐性的软件,它的功能还 ...

  9. Session深入浅出

    Session会在浏览器关闭后消失吗? 通常情况下,当我们关闭浏览器再重新打开后,我们就需要再次进行登陆(如果没有进行下次自动登录之类的设置).在Jav中(Session是通用的,这里以Java为例) ...

  10. 隐藏windows7/8“卸载或更改程序”里的软件

    隐藏windows7/8“卸载或更改程序”里的软件 通过修改注册表即可隐藏电脑中已安装的软件,这个方法会造成卸载列表无法加载已安装的软件,请谨慎操作!提示:删除注册表后windows自带的卸载程序.其 ...