webpack项目搭建
说明
本文原创,原文地址请看我的github的相关内容。
本开发基于mac os
带
.
是无序的,先后顺序可以调换。带1,2...
是有序的,先后顺序不可以调换。阅读需要有基础的webpack的知识
前置条件
需要安装node
需要全局安装webpack -- 执行"npm install webpack -g"
part zero 新建项目
1.cd desktop
2.mkdir your_project_name && cd your_project_name
3.npm init -y (注意,使用的-y之后一切都是默认的)
3.npm init (注意,回车后请按提示进行输入)
[注意,两个步骤3,请选择其中一个进行,推荐使用 npm init]
4.npm install --save-dev webpack
part one 基本搭建
1.进入你的根目录
2.如下:
- 在根目录下,添加src文件夹,并在此文件夹下面新建
index.js
,并在index.js
文件内写入下面的内容:
console.log("webpack demo");
- 在根目录下,新建一个名为
webpack.config.js
文件,并在当前文件输入一下的内容:
const path = require('path');module.exports = {entry:[//入口文件'./src/index'],output:{path:path.join(__dirname,'dist'),//出口文件的路径filename:'bundle.js',//打包后的文件名publicPath:'/'//公共路径名,当前根目录为root}
}
通过以上的两个步骤,可以执行下命令行中,进入根目录并执行webpack
指令。执行了本条指令后,会自动找到webpack.config.js
文件进行操作。得到的结果是:根目录多出了一个dist
文件夹,里面包含bundle.js
文件。
- 在根目录下,新建一个文件夹,并在此文件夹下面新建
index.html
,并在本文件中,添加如下的内容:
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>webpack</title>
</head>
<body><p>webpack demo</p><!--引入webpack打包后的javascript文件--><script type="text/javascript" src="../dist/bundle.js"></script>
</body>
</html>
经过上面的三个步骤之后,你可以打开static
下面的文件index.html
,并在浏览器上运行。结果是;在浏览器的控制台下面看到 "webpack demo" 的字
。
3.更改webpack.config.js为webpack.config.dev.js
原因:我们是在开发环境下面进行开发的,改名称有下面两个好处:
改名称能够更加清楚文件代表的意义。
能够更好的管理文件。
注意,更改名称之后,你不能够在控制台上面直接执行webpack
命令了。而是执行命令webpack --config webpack.config.dev.js
。是不是看着执行那么一长串的命令很是别扭,下面介绍一下使用npm 方式
执行的命令:
本身默认的生成的文件结构里面(我是使用npm init
生成的),有那么一个文件package.json
,里面的本身的内容如下:
{"name": "webpack-demo","version": "1.0.0","description": "webpack demo","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["webpack"],"author": "reng","license": "ISC","devDependencies": {"webpack": "^3.0.0"}
}
下面在package.json
文件里面的script字段里面
添加一些信息,如下:
..."scripts": {"dev":"webpack --config webpack.config.dev.js","test": "echo \"Error: no test specified\" && exit 1"}...
完成上面的内容之后,就在控制台可以执行npm run dev
的指令,这样的执行跟在控制台上面执行webpack --config webpack.config.dev.js
得到的结果一模一样的了。很是神奇是吧,熟悉node开发的人应该知道这个npm run dev
哈。如果你想实时监听文件的打包的话,需要改动package.json
文件对应的scripts
字段的字段如下:
..."scripts": {"dev":"webpack --config webpack.config.dev.js --watch","test": "echo \"Error: no test specified\" && exit 1"}...
4.页面更改为本地(localhost)执行
细心的人儿应该发现了在浏览器上面浏览的地址是酱紫的呢--file:///Users/reng/Desktop/webpack-demo/static/index.html
。如果我们要通过localhost(127.0.0.1)来查看,那咋办呢。这就使用到了webpack-dev-server
了呢。
4.1首先安装一下相关的依赖:npm install --save-dev webpack-dev-server
4.2接下来就要修改一下package.json
文件对应的scripts
字段的内容了。如下:
..."scripts": {"dev":"webpack-dev-server --config webpack.config.dev.js","test": "echo \"Error: no test specified\" && exit 1"}...
通过4.1 && 4.2
的修改,你可以在控制台上通过执行npm run dev
。浏览器默认的监听的端口号是8080
,此时,你在浏览器的url栏中输入localhost:8080/static/index.html
或者127.0.0.1:8080/static/index.html
就可以访问了。
注意:此时不能够进行webpack
将entry
的index.js转换成为bundle.js了咯。
有个问题,如果你是在本地中打开了多个项目的话,就会产生端口上的冲突,因为默认的端口号是8080。
下面给出两个更改端口的方案:
- 在
package.json
的字段scripts
里面添加,
..."scripts": {"dev":"webpack-dev-server --config webpack.config.dev.js --port 6066",//更改端口号"test": "echo \"Error: no test specified\" && exit 1"},...
- 在
webpack.config.dev.js
中进行修改,
...devServer:{port:9000,//更改监听的端口号,默认的端口号是8080}...
上面提供的两种更改端口号的方法你可以根据个人喜好来用,个人比较喜欢第二种,和 devServer
字段放在 一起比较好管理哈(后期这个字段会增加内容的,详情请接着往下看哦)
5.实现热加载
在开发的过程中,文件的变化的话,应该带来浏览器的自动刷新,这样就不用手动去刷新浏览器查看效果,加快了开发的效率。
自动刷新页面的话,就要在webpack.config.js
中添加.html
的模版了。需要使用到html-webpack-plugin
。使用的步骤如下:
5.1在控制台通过npm install html-webpack-plugin --save-dev
html-webpack-plugin插件,这个插件可以创建html文件,并自动将依赖写入html文件中。
5.2对webpack.config.dev.js
的内容做下更改:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {...devServer:{port:9000,//端口号contentBase:path.join(__dirname,"dist"),//告诉服务器从哪来提供内容publicPath:"/"},plugins:[new HtmlWebpackPlugin({template:'.static/index.html'//大包后的javascript自动绑定到模版中})]...
}
最终文档描述的项目的结构请见:webpack-demo
5.3执行"npm run dev"
在浏览器上打开控制台上面提示的localhost:9000
访问。修改istatic/ndex.html
页面自动刷新,修改相关的src/index.js
,不用刷新就可以查看相关的效果。到这里,webpack先告一段落了咯。
你可以到这里查看本webpack文档涉及到的整个项目,感兴趣的话可以将那个项目下载下来,在本地上运行运行哦!?
延伸的内容和本文档有继承和被继承的关系(本文档)延伸的地址webpack_extend01
转载于:https://www.cnblogs.com/reng/p/7076664.html
webpack项目搭建相关推荐
- vue(vue-cli+vue-router)+babel+webpack项目搭建入门(四)
vue(vue-cli+vue-router)+babel+webpack项目搭建入门<四> 本系列文章将介绍基于vue+webpack的前端项目的构建过程.文章分为四章内容,第一章介绍开 ...
- vue(vue-cli+vue-router)+babel+webpack项目搭建入门(三)
vue(vue-cli+vue-router)+babel+webpack项目搭建入门<三> 本系列文章将介绍基于vue+webpack的前端项目的构建过程.文章分为四章内容,第一章介绍开 ...
- vue(vue-cli+vue-router)+babel+webpack项目搭建入门 (第二步)
vue(vue-cli+vue-router)+babel+webpack项目搭建入门<二> 本系列文章将介绍基于vue+webpack的前端项目的构建过程.文章分为四章内容,第一章介绍开 ...
- vue(vue-cli+vue-router)+babel+webpack项目搭建入门 (第一步)
vue(vue-cli+vue-router)+babel+webpack项目搭建入门<一> 本系列文章将介绍基于vue+webpack的前端项目的构建过程.文章分为四章内容,第一章介绍开 ...
- java webpack web项目_vue+webpack项目搭建
项目依赖node,git,没有的话需先下载 1.新建文件夹右键选择 'Git Bash Here', 2.输入 vue init webpack -S 根据提示一路enter就好了,我选择的是 从 ...
- 分析vue-cli@2.9.3 搭建的webpack项目工程
前言 已经有很多分析Vue-cli搭建工程的文章,为什么自己还要写一遍呢.学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景.你不一定能看到别人看到的风景,体会到别人的心情.只有自己去登山 ...
- 超简单的react和typescript和引入scss项目搭建流程
1.首先我们先创建一个react项目,react官网也有react项目搭建的命令 npx create-react-app my-app cd my-app 2.安装我们项目需要的样式依赖,这个项目我 ...
- vue2.0 项目搭建 和vue 2.0 electron 项目搭建
1.关于electron vue 项目的搭建 全局或者局部安装项目vue:脚手架指令生成: npm install -g vue-cli vue init simulatedgreg/electron ...
- Vue.js-Day06-AM【项目实战(附带 完整项目源码)-day01-am:移动端响应式(响应式尺寸、视口问题、实现rem变化、rem设计)、实战项目搭建(初始化项目、处理rem、搭建路由)】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
最新文章
- 中下层确实没钱了,消费枯竭!?
- 开始使用gradle(二)
- ASP.NET的地址重写“.NET研究”(URLRewriter)实现原理及代码示例
- lin-cms-dotnetcore.是如何方法级别的权限控制(API级别)的
- [密码学基础][每个信息安全博士生应该知道的52件事][Bristol52]46.Sigma协议正确性、公正性和零知识性
- 整活插件 炉石传说_酒馆战旗整活插件 免安装版
- 题目1057:众数----------------------位置,位置-------------如何控制while的循环条件,先输入一个数,再在while里面输入其他的19个数...
- NDK 下利用 arm-linux-androideabi-addr2line 定位 so 库问题点
- 上海,不算太郁闷的地方
- spring配置redis(xml+java方式)(最底层)
- Wings与parasoft c++ test在单元测试用例自动生成能力的比对
- mob AndroidStudio 短信SDK集成
- IEEE2020-IJON: Exploring Deep State Spaces via Fuzzing
- 关于NX UG11.0在visual studio中不能创建模板的问题
- 微博mysql连接错误_新浪微博错误代码详解
- Java编程:基于socket实现局域网双人联机对战五子棋
- nios自学笔记三:nios常用外设C函数整理
- t3服务器补丁文件夹在哪,FM2017全补丁存放路径汇总 补丁放在哪个文件夹-游侠网...
- redis基本操作与Java连接
- 介绍一个成功的 Git 分支模型