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