时间:2021-07-01 10:21:17 帮助过:12人阅读
首先安装Nodejs,直接去nodejs官网下载,默认会安装Npm,所以这里可以不用单独安装。
由于国内网络原因,如果直接使用Npm安装依赖包会因为网络和墙的原因导致不成功,好在淘宝给我提供了可以使用的镜像,地址是:,按照其【使用说明】将镜像安装好。
目前前端开发比较火的IDE是Jetbrain的WebStorm,到其官网下载:,安装后有30天的试用期,如果觉得不爽,可以去网上找破解,这里把我使用的注册信息放出来。当然最好的是付费啦
当开发环境准备好后,就可以打开WebStorm,新建一个空项目,如下图:
使用webstorm的好处很多,其中之一就是可以直接在IDE里面调出控制台,如下图:
在控制台输入“npm init”初始化这个工程,控制台会让你输入如下信息,这里可以默认都回车,最后按照提示输入"yes"则初始化完成。
这时在工程根目录下会生成package.json,打开文件能看到刚才在控制台输入的信息,如下:
package.json文件是Nodejs和Npm查找依赖的清单,更多的信息可以参考这篇文档:和
关于Webpack的概念和作用可以参考这篇博文:https://llp0574.github.io/2016/11/29/getting-started-with-webpack2/?utm_source=tuicool&utm_medium=referral和
。英语好的童鞋可以直接参看官网:http://webpack.github.io/
使用webpack的目的是让代码更模块化,方便维护和管理,这和在Java中用maven来管理包很相似。
首先,在控制台输入命令:npm install webpack,这个命令的作用是让npm安装webpack到node_modules(该目录会自动生成)下。
在产品环境中,以在命令后加上--save,比如:npm install webpack --save,这个意思是说把webpack安装到node_modules下,并且更新package.json文件的dependencies。
在开发环境中,我们使用:npm install webpack --save-dev,将webpack安装到Node_modules下,并且更新package.json的devDependencies。
这里我们使用在开发环境中的命令。
更多的NPM命令可以参看官网:和
1.首先,我们再工程目录下新建src目录,并在src下新建hello.js文件,文件内写如下代码:
export default function () {const hello = document.createElement("div");hello.textContent = "Hello Webpack!"return hello;}
这是按照ES6的语法来实现。
关于ES6的更多内容可以参考这篇文档:。
export是定义对外暴露的接口,default是为export提供一个默认输出,这样可以在import的时候自定义变量名而不用在import的时候指定export中的变量名。所以这段代码意思是:默认输入一个匿名函数。
2.然后,在hello.js同级下创建main.js,然后输入如下内容:
import Hello from "./hello";document.getElementById("app").appendChild(Hello());
import是将刚才所写的hello.js文件当做一个模块导入进来,"Hello"变量就是为这个匿名函数定义变量名,from后面就是被引入的文件地址,如果是js文件默认不用写,该路径可以是相对路径或者绝对路径,然后用js去从dom获取app节点,并添加子级元素。
3.在工程根目录新建public文件夹,并新建一个Index.html文件,如下:
然后在Html文件中创建一个div,其id为app,并在body尾处引入script,如下图:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Webpack Example</title><body><div id="app" ></div><script type="text/javascript" src="bundle.js?1.1.11"></script></body></html>
4.在工程目录下新建webpack.config.js文件,编辑webpack.config.js文件,编写如下代码:
module.exports = {entry: __dirname + "/src/main.js?1.1.11",output: {path: __dirname + "/public",filename: "bundle.js?1.1.11"}}
__dirname是nodejs中的全局变量,指向当前执行脚本的目录。
module.exports是webpack的对象,其中entry是指定入口文件,这里指定main.js为入口文件。output下的path是输出目录,filename是输出文件名称。通过path和filename组合就可以将我们再代码中引入的模块完整的输出到制定的文件中。
5.在控制台执行webpack命令,就可以看到bundle.js文件已经输出到Public目录下了
这个时候通过浏览器打开Index.html可以看到效果:
上面我们已经可以用webpack来打包我们的模块,不过这只是刚入门,后面我们会不断的完善webpack.config.js这个文件。
从刚才的例子中,我们需要自己手动的在html页面里面引入bundle.js文件,那么有没有自动帮我们引入文件的功能呢?回答肯定是有的,这里就介绍下Html-webpack-plugin插件。
插件官方地址是:,这里只是简单讲解使用。
1.要使用html插件,首先需要在项目中引入该模块,在控制台执行命令:
npm install html-webpack-plugin --save-dev
2.编辑webpack.config.js文件,在其中加入以下代码:
var HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: __dirname + "/src/main.js?1.1.11",output: {path: __dirname + "/public",filename: "bundle.js?1.1.11"},plugins: [new HtmlWebpackPlugin() ]}
可以看到,使用require引入html-webpack-plugin,然后在配置中的plugins数组中new一个插件对象。
3.这个时候我们把public目录删除,再在控制台执行webpack命令,会看到如下:
注意看红框部分,首先,title已经被修改了插件默认值;其次,id为app的div已经没有了。最后,可看到在body末尾插件帮我们把bundle.js插入。
template属性
看插件官网,插件有一个template属性,可以指定模板文件,插件能按照模板帮我们插入js或者css引用。
官网地址是:。
看官网描述,默认会有一个ejs的loader会解析模板,至于ejs是什么?ejs是一个模板语言,在nodejs开发中经常会用到,这里可以把ejs完全当做一个html格式来用。
所以,在src目录下,我们新建一个index.temp.ejs文件,并把public下的index.html的内容拷贝到该文件中,并修改至如下:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Webpack Example</title><body><div id="app" class="custom"></div></body></html>
可以看到,title已经被我们修改回webpack example了,并且也添加了id为app的div,还删除了script,接着,删除Public下的文件。然后我们再控制台输入webpack,等webpack打包编译完成,这时public下生成了bundle.js和index.html文件,编辑index.html文件,可以看到如下信息:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack Example</title> <link href="styles.css?1.1.11" rel="stylesheet"></head> <body> <div id="app" class="custom"></div> <script type="text/javascript" src="bundle.js?1.1.11"></script></body> </html>
在Body末尾,插件自动给我们把script加上了。
如果我们也想把css文件也自动插入,那么就会用到extract-text-webpack插件。
其官网地址是:。
官网的usage如下:
const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] }, plugins: [ new ExtractTextPlugin("styles.css?1.1.11"), ] }
1.首先还是要先在控制台输入命令:
npm install extract-text-webpack-plugin --save-dev。
这里要注意:官网只提示安装extract插件,其实在编译的时候,还需要style-loader和css-loader,所以还要执行命令:
npm install style-loader --save-dev
npm install css-loader --save-dev
2.然后在webpack.config.js文件上面,require一下这个插件
3.按照官网的用法,编写module节点,最后如下所示:
var HtmlWebpackPlugin = require("html-webpack-plugin"); var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: __dirname + "/src/main.js?1.1.11", output: { path: __dirname + "/public", filename: "bundle.js?1.1.11" }, module: { rules: [{ test: /\.css$/, use: ExtractTextWebpackPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }] }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.temp.ejs" }), new ExtractTextWebpackPlugin("styles.css?1.1.11") ] }
注意:
test是正则表达式,不是字符串!!!,没有引号
在webpack2中,module下的loaders改为rules,后者拥有更多的功能
4.接着,我们在src目录下新建一个index.css文件,并编辑编写如下样式:
.custom{ font-size: 18px; color: bisque; border: 1px moccasin solid; padding: 5px; }
5.然后,编辑index.temp.ejs文件,在div标签加入class="custom",如下图红框处:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack Example</title> </head> <body> <div id="app" class="custom"></div> </body> </html>
6.编辑main.js文件,在其顶部Import刚才新建的index.css文件,如下图:
import Hello from "./hello"; import IndexStyle from "./index.css?1.1.11"; document.getElementById("app").appendChild(Hello());
7.最后,在控制台输入命令
webpack
编译完成后,可以看到public目录下生成了style.css文件,编辑index.html文件,可以看到在Head中引入了Style.css文件,如下图:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack Example</title> <link href="styles.css?1.1.11" rel="stylesheet"></head> <body> <div id="app" class="custom"></div> <script type="text/javascript" src="bundle.js?1.1.11"></script></body> </html>
在开发中,我们会不断的调试页面和参数,如果每次都是执行webpack命令未免太累了,所以这里介绍一个开发服务器webpack-dev-server,它提供一个易于部署的服务器环境,并且具有实时重载的功能。
更多的文档可以参考:。
要使用这个功能,首先还先执行npm的安装命令
npm install webpack-dev-server --save-dev,
执行完成后,编辑package.json文件,添加"start"代码如下:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":"webpack-dev-server --progress"}
"--progress"参数可以查看当前执行进度,在控制台输入"npm start"控制台会打印日志信息,最后出现编译成功,代表服务启动完成,这时打开http://localhost:8080,可以看到index.html的内容,如下图:
这个时候,编辑hello.js,添加一些字符串如下:
export default function () { const hello = document.createElement("div"); hello.textContent = "Hello Webpack!This is my example!" return hello; }
保存后,打开浏览器不用刷新,就可以看到我们新添加的"This is my example"。
以上就是使用Vue2.X和Webpack2.X开发SPA应用的环境构建方法的详细内容,更多请关注Gxl网其它相关文章!