vue学习前奏——webpack
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue学习前奏——webpack相关的知识，希望对你有一定的参考价值。
“工欲善其事必先利其器”，要想学习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.
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
讲到这里，算是敲了一下webpack的门，可能还不算事入门，webpack的配置还有很多，详情学习还是需要花很多时间的。但毕竟webpack是工具，学好如何在相应的项目中运用才是最主要的。这里只是简单介绍了如何利用webpack打包文件、如何搭建服务器进行热更新。
下一篇：如何利用webpack搭建vue的利器——vue-cli（vue脚手架）！
以上是关于vue学习前奏——webpack的主要内容，如果未能解决你的问题，请参考以下文章
Vue报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段