webpack搭建项目入门

webpack搭建项目入门

由于最近在学习vueJS，学习的过程中发现有必要去了解一下webpack，就去找资料学习一下，总结一下今天的学习（构建webpack项目前提是要安装好node，同时配置好npm，我是win7系统，之前安装node和vue的时候出现了很多问题，最终也都解决了，有时间我会整理一下node和vue方便和我一样的初学者解决问题）。

建一个demo项目，用一个简单的例子某购物平台，需要两个用户界面，admin和customor

我是在本地手动建的文件夹，然后在IDE里面打开的，每一个文件夹下面分别建立index.html和index.js



admin文件夹下面的index.html（下图所示）同理customer下面的index.html也是一样。



admin文件夹下面的index.js（下图所示）同理customer下面的index.js也是一样。



建立完以后cmd进入项目所在的文件夹， 运行npm init（我是用管理员权限运行的）

npm init

运行完以后如果不报错的话就一直回车下一步就可以了，执行到如图所示就可以了



此时你的项目目录里面会多出一个package.json文件。webpack的配置文件是在webpack.config.js里面，所以我们需要手动创建一个webpack.config.js文件。



然后在webpack.config.js里面写入代码，注意：dirname前面是两个下划线，

var path = require('path');
module.exports = {
entry: {//入口文件
admin: './admin/index.js',
customer: './customer/index.js'
},
output: {//打包方式
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js' //打包文件的名字
}
};

现在可以去cmd里面执行一下npm i webpack-dev-server 安装这个的时候需要等待一段时间。安装完之后执行下面的代码

npm i webpack-dev-server
webpack --process --colors

执行webpack –process –colors代码的时候我会遇到一个问题,后来换成webpack –progress –colors就好了



运行成功后目录机构里面会多出一个文件夹dist，里面会生出两个文件，点开文件后拉到最下面就会看到我们在两个index.js里面写的代码了



现在已经打包好了，为了让我们的页面在浏览器里面显示出来，需要一个webpack-dev-server，我们需要在webpack.config.js里面配置一下，在output里面面加入publicPath。

var path = require('path');
module.exports = {
entry: {
admin: './admin/index.js',
customer: './customer/index.js'
},
output: {//打包方式
path: path.join(__dirname, 'dist'),
publicPath: '/dist/',   //dev-server刚刚加入的
filename: '[name].bundle.js'
}
};

同时也要在两个index.html里面分别引入dist里面的两个问题

<script src="/dist/admin.bundle.js"></script>
<script src="/dist/customer.bundle.js"></script>

然后我们去启动项目cmd中执行webpack-dev-server 我在写文档的时候执行这句话报了一个错误，



想了一会终于找到问题啦，我没有安装webpack依赖，然后我又安装了一下就好了执行下面的语句，执行这个语句的时候要等一段时间。

npm install webpack --save-dev

安装完webpack依赖后，再重新执行一下webpack-dev-server就会成功了。



然后在浏览器里面输入localhost:8080/admin,就可以看到我们写的代码啦



这就是我今天要记录的webpack搭建项目。

快捷键

加粗

Ctrl + B

斜体

Ctrl + I

引用

Ctrl + Q

插入链接

Ctrl + L

插入代码

Ctrl + K

插入图片

Ctrl + G

提升标题

Ctrl + H

有序列表

Ctrl + O

无序列表

Ctrl + U

横线

Ctrl + R

撤销

Ctrl + Z

重做

Ctrl + Y

Markdown及扩展

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

使用简单的符号标识不同的标题，将某些文字标记为粗体或者斜体，创建一个链接等，详细语法参考帮助？。

本编辑器支持 Markdown Extra , 　扩展了很多好用的功能。具体请参考<
e95e
a href="https://github.com/jmcmanus/pagedown-extra" title="Pagedown Extra">Github.

表格

Markdown　Extra　表格语法：

项目	价格
Computer	$1600
Phone	$12
Pipe	$1

可以使用冒号来定义对齐方式：

项目	价格	数量
Computer	1600 元	5
Phone	12 元	12
Pipe	1 元	234

定义列表

Markdown　Extra　定义列表语法：
项目１
项目２
定义 A

定义 B

项目３
定义 C

定义 D

定义D内容

代码块

代码块语法遵循标准markdown代码，例如：

@requires_authorization
def somefunc(param1='', param2=0):
'''A docstring'''
if param1 > param2: # interesting
print 'Greater'
return (param2 - param1 + 1) or None
class SomeClass:
pass
>>> message = '''interpreter
... prompt'''

脚注

生成一个脚注1.

目录

用

[TOC]

来生成目录：

webpack搭建项目入门
快捷键

Markdown及扩展
表格

定义列表

代码块

脚注

目录

数学公式

UML 图

离线写博客

浏览器兼容

数学公式

使用MathJax渲染LaTex 数学公式，详见math.stackexchange.com.

行内公式，数学公式为：Γ(n)=(n−1)!∀n∈N。

块级公式：

x=−b±b2−4ac−−−−−−−√2a

更多LaTex语法请参考 这儿.

UML 图:

可以渲染序列图：

Created with Raphaël 2.1.0张三张三李四李四嘿，小四儿, 写博客了没?李四愣了一下，说：忙得吐血，哪有时间写。

或者流程图：

Created with Raphaël 2.1.0开始我的操作确认？结束yesno

关于 序列图 语法，参考 这儿,

关于 流程图 语法，参考 这儿.

离线写博客

即使用户在没有网络的情况下，也可以通过本编辑器离线写博客（直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。

用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。

博客发表后，本地缓存将被删除。　

用户可以选择 [/i] 把正在写的博客保存到服务器草稿箱，即使换浏览器或者清除缓存，内容也不会丢失。

注意：虽然浏览器存储大部分时候都比较可靠，但为了您的数据安全，在联网后，请务必及时发表或者保存到服务器草稿箱。

浏览器兼容

目前，本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。

IE９以下不支持

IE９，１０，１１存在以下问题

不支持离线功能

IE9不支持文件导入导出

IE10不支持拖拽文件导入

这里是 脚注 的 内容. ↩