webpack安装和使用

http://www.css88.com/doc/webpack/ webpack的中文文档

https://www.cnblogs.com/brandonhulala/p/6057378.html

一.安装node

二.安装webpack命令环境

npm install webpack -g 安装后验证：webpack-version

三.package.json工程文件(npm init)

进入一个新建的空项目，执行npm init---一路回车

四.安装本地webpack

npm install webpack -D

五.小例子（这里后续会讲用webpack.config.js去配置）

webpack默认支持commonjs写法

index:页面。页面只引入bundle.js(编译后的文件)

entry.js 入口文件，编写咱需要的代码

终端:webpack entry.js bundle.js (将入口文件编译到bundle.js）;//这里注意每次修改js文件后都要 编译一次.

导入其他js文件:在其他文件modele.exports=...... 然后在入口文件var name=requier(url)导入

导入后再执行webpack entry.js bundle.js

六loader转换器.（后续会讲webpack.config会配置）

js文件中加载css文件,要下载依赖如下:style-loader和css-loader的依赖

npm install css-loader --save //这里注意-- --save是将下载的依赖名和版本号保存到 package.json的文件中

npm install style-loader --save

下载后在js中：require(style-loader!css-loader!./style.css);//这里注意要加入转换器（后续会讲webpack.config配置就不需要）

注意:在webpack中，多个loader加在要用 ！ 连接多个loader.

七.webpack.config.js配置（必须要用）

作用：配置一些webpack需要的入口，出口,rules.....

module.exports={
entry:["./entry.js"],//入口文件
output:{
filename:"bundle.js"  //出口文件
},
devtool:"source-map",////直接生成source-map
module:{
//转换器
rules:[
//设置所有以.css结尾的
{
test:/\.css$/,
loader:'style-loader!css-loader'
},
//设置所有.js结尾的Es6转换Es5(尚未结束,还要预设,看下文)
{
test:/\.js$/,
loader:"babel-loader",
exclude:/node_modules/   //排除哪些目录的js.node——modeles
}
]
}

};

//配置后每次修改就不需要webpack entry.js bundle.js.直接执行webpack就可以了

// 配置Es6转换Es5除了上文的在webpack.config.js中配置babel-loader外,还需要在目录新建一个文件夹, 名称为.babelrc.内容为{'presets':['2015']}

{
'presets': ['es2015']
}

//配置了loader以后引入css文件就不需要require(style-loader!css-loader!./style.css).直接 require("./style.css")

八.webpack命令

webpack 开发环境下编译(打包)

webpack -p 生产环境下编译(压缩)

webpack -w 监听文件改动，自动编译(速度更快).就不用每次执行webpack去编译了

webpack -d 开启(生成)source maps.用来调试.没有开启的状态下在浏览器的开发者工具只有index和 bundle压缩后的js.开启后可以看到bundle所加载的所有资源的文件(方便调试)

注:如果-p -w -d都要开启.直接执行webpack -wdp

九.babel的使用

首先下载以下：

npm install babel-loader --save

npm install babel-core --save

npm install babel-preset-es2015 --save

十.webpack-dev-server用服务器打开

首先命令安装环境:npm install webpack-dev-server -g //-g是全局安装

使用:webpack-dev-server 默认端口号：8080

修改端口:webpack-dev-server --port 8088 //类似这样修改端口号

自动刷新浏览器:webpack-dev-server --inline //改变代码后，自动刷新浏览器

热重载(局部更改)： webpack-dev-server --hot

如果要执行多个:webpack-dev-server --inline --hot

.......................当然也可以在webpack.config.js中设置(推荐)........................

webpack.config.js中配置后直接运行:webpack-dev-server

module.exports={
entry:["./entry.js"],//入口文件
output:{
filename:"bundle.js"  //出口文件
},
devtool:"source-map",////直接生成source-map
//配置server
devServer: {
port:8080,
inline:true,
},
module:{
//转换器
rules:[
//设置所有以.css结尾的
{
test:/\.css$/,
loader:'style-loader!css-loader'
},
//设置所有.js结尾的转换Es6(尚未结束,还要预设)
{
test:/\.js$/,
loader:"babel-loader",
exclude:/node_modules/   //排除哪些目录的js.node——modeles
}
],
}

};

................. 还有一种打开方式:npm run dev //那么如果配置呢？如下:................................

打开package.json文件,有一个scripts的选项,就是你运行的脚本.

在scripts中增加dev:"webpack-dev-server";//注意这里的对象左边是你运行时候的名字，比如npm run dev中的dev对应scripts中你的dev。右边表示你执行npm run 一个name的时候实际上执行的命令

比如:我允许npm run test的结果就是在控制台输出了一个"我是测试"

{
"name": "myproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
//scripts这里是你运行的脚本
"scripts": {
"dev": "webpack-dev-server",
"test":"echo 我是测试"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.6.0"
},
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.7",
"style-loader": "^0.18.2"
}
}

十一.引入文件时省略文件名后缀和简化路劲(类似变量代替共同的路径头)

配置resolve,如下.

var path= require(“path”)
....
module.exports={
entry:["./entry.js"],//入口文件
output:{
filename:"bundle.js"  //出口文件
},
devtool:"source-map",////直接生成source-map
devServer: {
port:8080,
inline:true,
},
module:{
//转换器
rules:[
//设置所有以.css结尾的
{
test:/\.css$/,
loader:'style-loader!css-loader'
},
//设置所有.js结尾的转换Es6(尚未结束,还要预设)
{
test:/\.js$/,
loader:"babel-loader",
exclude:/node_modules/   //排除哪些目录的js.node——modeles
}
],
},
//配置省略文件后缀和简化路径
resolve:{
extensions:[" ",".js",".css",".json",".jsx”], //省略文件后缀
alias: {
'src':path.join(__dirname,"..","src/assets")  //这里path.join是node整合路劲方法，在该方法中，可以使用一个或多个字符串值参数，该参数返回将这些字符串值参数结合而成的路径。————dirname是根目录的意思。以后引入文件只要引入写法:”src/...其余的路径”，前两个参数写死，最后一个是路径，路径从根目录开始写
//由于该方法属于path模块，使用前需要引入path模块（var path= require(“path”) ）
}
}
};

发现path.join(__dirname,"..","src/assets")转绝对路径后，打包后路径不能正常解析，所以先建议不要转绝对路径，直接用相对路径