Vue2.X와 Webpack2.X를 이용한 SPA 애플리케이션 개발을 위한 환경 구축 방법
- 巴扎黑원래의
- 2017-07-22 15:40:301177검색
[TOC]
1. 개발 환경 준비
1.1 nodejs 설치
먼저 Nodejs를 설치하고 nodejs 공식 홈페이지에 직접 가서 다운로드하면 기본적으로 Npm이 설치되어 있으니 여기서는 별도로 설치할 필요가 없습니다. .
1.2 Taobao Npm 미러 사용
국내 네트워크 문제로 인해 Npm을 직접 사용하여 종속성 패키지를 설치하는 경우 네트워크 및 벽 문제로 인해 실패합니다. 다행히 Taobao에서 사용할 수 있는 미러를 제공했습니다. 주소는 다음과 같습니다. [사용 지침]에 따라 이미지를 설치합니다.
1.3 IDE 준비
현재 가장 인기 있는 프런트엔드 개발 IDE는 Jetbrain의 WebStorm입니다. 공식 웹사이트에서 다운로드하세요. 설치 후 30일의 평가판 기간이 있으며 불편하시면 온라인으로 접속하실 수 있습니다. 균열을 찾으세요. 제가 사용한 등록 정보가 공개되었습니다. 물론 가장 좋은 것은 비용을 지불하는 것입니다
2. Webpack 프로젝트 구축
2.1 새 프로젝트
개발 환경이 준비되면 아래와 같이 WebStorm을 열고 빈 프로젝트를 새로 생성할 수 있습니다. webstorm 사용의 이점 중 하나는 아래와 같이 IDE에서 직접 콘솔을 불러오는 것입니다.
프로젝트를 초기화하려면 콘솔에 "npm init"를 입력하세요. 여기에서는 기본적으로 Enter를 누르고 마지막으로 메시지가 나타나면 "yes"를 입력하면 초기화가 완료됩니다.
이때, 프로젝트 루트 디렉터리에 package.json이 생성됩니다. 파일을 열면 다음과 같이 콘솔에 방금 입력한 정보를 확인할 수 있습니다.
package.json 파일은 다음과 같은 목록입니다. Nodejs 및 Npm에서 발견한 종속성 자세한 내용은2.2로 Webpack 설치 문서를 참조하세요. Webpack의 개념과 기능은 이 블로그 게시물(https://llp0574.github)을 참조하세요. io/2016/11/29/getting-started-with-webpack2/?utm_source=tuicool&utm_medium=referral 및
. 영어를 잘하려면 공식 홈페이지 http://webpack.github.io/를 직접 참고하면 됩니다. webpack을 사용하는 목적은 코드를 보다 모듈화하고 유지 관리를 용이하게 하는 것입니다. 이는 사용하는 것과 매우 유사합니다. Maven은 Java에서 패키지를 관리합니다.
2.2.1 설치
먼저 콘솔에 npm install webpack 명령을 입력합니다. 이 명령의 기능은 npm이 node_modules 아래에 webpack을 설치하도록 하는 것입니다(디렉토리가 자동으로 생성됩니다).
- 프로덕션 환경에서 npm install webpack --save와 같이 명령 뒤에 --save를 추가합니다. 이는 node_modules 아래에 webpack을 설치하고 package.json 파일의 종속성을 업데이트한다는 의미입니다.
- 개발 환경에서는 npm install webpack --save-dev를 사용하여 Node_modules 아래에 webpack을 설치하고 package.json의 devDependency를 업데이트합니다.
- 여기서는 개발 환경에서 명령을 사용합니다.
2.2.2 구성
1 먼저 프로젝트 디렉터리에 새 src 디렉터리를 만들고 hello.js 파일을 새로 만듭니다. src 아래에 다음 코드를 작성합니다.
export default function () {const hello = document.createElement("div");hello.textContent = "Hello Webpack!"return hello;}
export는 외부 세계에 노출되는 인터페이스를 정의하고 default는 내보내기에 대한 기본 출력을 제공하므로 가져올 때 내보내기에서 변수 이름을 지정하는 대신 가져올 때 변수 이름을 사용자 정의할 수 있습니다. 따라서 이 코드는 다음을 의미합니다. 기본적으로 익명 함수를 입력합니다.
2. 그런 다음 hello.js와 동일한 레벨에 main.js를 생성하고 다음 내용을 입력합니다.
import Hello from "./hello";document.getElementById("app").appendChild(Hello());
3. 프로젝트 루트 디렉터리에 새 public 폴더를 만들고 다음과 같이 새 Index.html 파일을 만듭니다.
그런 다음 id 앱을 사용하여 Html 파일에 div를 만들고 끝에 스크립트를 삽입합니다.
<!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>
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可以看到效果:
3、进阶Webpack
上面我们已经可以用webpack来打包我们的模块，不过这只是刚入门，后面我们会不断的完善webpack.config.js这个文件。
从刚才的例子中，我们需要自己手动的在html页面里面引入bundle.js文件，那么有没有自动帮我们引入文件的功能呢？回答肯定是有的，这里就介绍下Html-webpack-plugin插件。
3.1 常用插件
3.1.1 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文件，可以看到如下信息：
76c82f278ac045591c9159d381de2c57 100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7Webpack Example6e916e0f7d1e588d4f442bf645aedb2f 3f103fbe71cf3c8496f52de6b1187a2a9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 2cc379576380abd0be39e1d1832e7fc016b28748ea4df4d9c2150843fecfba68 6bbbe3d7ae7fe3978737f0820f53b5b92cacc6d41bbb37262a98f745aa00fbf036cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
在Body末尾，插件自动给我们把script加上了。
3.1.2 Extract-text-webpack插件
如果我们也想把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"，如下图红框处:
76c82f278ac045591c9159d381de2c57 100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7Webpack Example6e916e0f7d1e588d4f442bf645aedb2f 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 2cc379576380abd0be39e1d1832e7fc016b28748ea4df4d9c2150843fecfba68 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
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文件,如下图:
76c82f278ac045591c9159d381de2c57 100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7Webpack Example6e916e0f7d1e588d4f442bf645aedb2f 3f103fbe71cf3c8496f52de6b1187a2a9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 2cc379576380abd0be39e1d1832e7fc016b28748ea4df4d9c2150843fecfba68 6bbbe3d7ae7fe3978737f0820f53b5b92cacc6d41bbb37262a98f745aa00fbf036cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
3.2 开发服务器 - Webpack-dev-server
在开发中，我们会不断的调试页面和参数，如果每次都是执行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 애플리케이션 개발을 위한 환경 구축 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!