Vue学习前奏—webpack

Vue学习前奏—webpack

第一步：安装

Node.js

　　下载地址：

http://nodejs.cn/download/

　　安装就是傻瓜式的，一直下一步就可以。安装完毕后可以通过

cmd输入npm -v查看是否安装成功。//node a.js 可以运行a.js

　　

npm（node package manage of JavaScript）作用：Node.js下载后自带npm，类似于迅雷，可以下载项目所需的依赖模块/包。

允许用户从

NPM服务器下载别人编写的第三方包到本地使用。

允许用户从

NPM服务器下载并安装别人编写的命令行程序到本地使用

允许用户将自己编写的包或命令行程序上传到

NPM服务器供别人使用。

第二步：

npm init初始化生成package.json

　　首先建立一个项目文件夹，进入文件夹，

shift+右击，出现【在此处打开命令窗口(W)】，点击进入cmd控制台，目录即为当前文件夹目录。然后输入npm init，回车，会出现一些项目有关参数，可一路回车，完成后创建一个package.json。

　　

package.json用来存放整个项目的依赖模块/包，当我们把整个项目迁移到别的地方使用时，项目运行时会根据package.json的依赖参数自动下载所需模块/包。

第三步：安装

webpack

　　

命令：

npm install webpack --save-dev

　　测试

webpack在本地是否可用，webpack -v 如果出现webpack为无效命令，则使用全局安装webpack：npm install webpack -g --save-dev

　　

WebPack可以看做是

模块打包机

：它做的事情是，分析你的项目结构，找到

JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

　　

Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

　　

第四步：利用

webpack打包模块并运行

　　

webpack可以解析es6，但注意 require请求同级目录文件时（./）也要写，代表同级目录。（../）代表上级目录。

　　

如果需要把

css打包到js文件中，需要安装css加载器，安装命令：npm install --save-dev style-loader css-loader.

　　

css-loader 和 style-loader

，二者处理的任务不同，

css-loader

使你能够使用类似

@import 和 url(...)

的方法实现

require()

的功能

,style-loader

将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入

webpack打包后的JS文件中。

（

不推荐

）手动打包并运行：

# {extry file}出填写默认入口文件index.js的路径

# {destination for bundled file}处填写打包文件的目标存放路径,运行后会自动创建一个bundle.js/build.js

# 填写路径的时候不用添加{}

webpack {entry file} {destination for bundled file} //如webpack ./js/index.js ./dist/bundle.js

　　在

js文件中引入css文件语法：require('style-loader!css-loader!../css/index.css');注意顺序不能错！

　　（

推荐

）自动打包并运行：

　　需要在项目的根目录创建

webpack.config.js.项目里配置如下：

module.exports = {

entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 output: {

path: __dirname + "/public",//打包后的文件存放的地方

filename: "bundle.js"//打包后输出文件的文件名 },

　　

//配置css加载器的方法试了很多，就这个可以用（rules代替了loaders）.
//配置好以后：require('style-loader!css-loader!../css/index.css')就可以写成require('../css/index.css');

　　

module: {
rules: [

{

test: /\.css$/,

use: [

{ loader: "style-loader" },

{ loader: "css-loader" }

　　注：若提示

output下path提示不是绝对路径，试着

去掉

path，finename带上相对路径，即：

output: {

path: './dist/js/', // 打包后所放的路径

filename: 'bundle.js'// 打包之后的文件名
}

　　改成：

output: {

filename: './dist/js/bundle.js' // 打包之后的文件名}

第五步：搭建

webpack服务器进行热加载自动刷新

　

　写到这里，使用

webpack一个单词就可以打包运行我们的项目了，但接下来...webpack最牛逼的地方来了——webpack可以像php/java/.net...一样搭建为我们搭建一个服务器，这样就可以热更新项目代码，实现实时运行项目，进而方便我们调试项目。

　　1、安装： npm install webpack-dev-server -g

　　

2、写入到依赖： npm install webpack-dev-server --save-dev

　 3、第三步：修改webpack配置文件中的output：

output:{

path:"/", //注意这里的改变，必须是根目录,指定目录无效，因为webpack会在内存中根目录下生成下面文件名。

filename:"bundle.js"

　

4、修改index.html

<script type="text/javascript" src="bundle.js"></script>

　

5、运行命令 实现自动刷新： webpack-dev-server --hot --inline

　

6、输入localhost:8080/运行...

说明：

webpack-dev-server的默认端口是8080