vue学习前奏——webpack

标签：下载   方法   自带   logs   很多   打开   ping   padding   进入   

　　“工欲善其事必先利其器”，要想学习vue，首先需要我们去了解webpack，便于后期快速构建运行项目。废话不多说，下面开始介绍在开始一个vue项目前我们需要对webpack有一定的了解——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是国外的，可能会比较慢，建议安装cnpm，安装方法：npm install -g cnpm --registry=https://registry.npm.taobao.org

第二步：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.

　　（不推荐）手动打包并运行：

# {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

　　讲到这里，算是敲了一下webpack的门，可能还不算事入门，webpack的配置还有很多，详情学习还是需要花很多时间的。但毕竟webpack是工具，学好如何在相应的项目中运用才是最主要的。这里只是简单介绍了如何利用webpack打包文件、如何搭建服务器进行热更新。

　　下一篇：如何利用webpack搭建vue的利器——vue-cli（vue脚手架）！

vue学习前奏——webpack

标签：下载   方法   自带   logs   很多   打开   ping   padding   进入   

原文地址：http://www.cnblogs.com/chenwenhao/p/7683981.html