1.webpack介绍
webpack是一个模块加载器兼打包工具。它是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。支持对react热插拔。
2.安装(使用淘宝镜像)
a.全局安装
cnpm install webpack -g
b.局部安装(安装在项目根目录下)
首先,自动生成package.json文件
cnpm init
其次,安装webpack
cnpm install webpack --save-dev
注意: 1.package.json文件配置这项目的所有依赖。
2.创建练习项目的时候可以不必介意,这些属性的配置,全部默认即可,实际项目使用还请遵照规则。
3.package.json文件中不能存在注释,否则会编译报错。
3.配置
每个项目都必须有一个webpack.config.js配置文件。包含了webpack的配置信息。
var webpack = require('webpack');
module.exports = {
//2、进出口文件配置
entry:__dirname+'/src/entry.js',//指定的入口文件,“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录
output: {//输出
path: __dirname+'/public',//输出路径
filename: 'bundle.js'//输出文件名
},
module: {//在配置文件里添加加载器说明,指明每种文件需要什么加载器处理
loaders: [
{//json加载器
test: /\.json$/,
loader: "json-loader"//注意-loader不能省略,网上说能省略,经测试编译会报错
},
{//5、编译es6配置
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',//在webpack的module部分的loaders里进行配置即可
query:{
presets:['es2015','react']
}
},
{//3、CSS-loader
test:/\.css$/,
loader:'style-loader!css-loader'//添加对样式表的处理
}
]
},
//4、服务器依赖包配置
devServer: {//注意:网上很多都有colors属性,但是实际上的webpack2.x已经不支持该属性了
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
//hot:true,//不要书写该属性,否则浏览器无法自动更新
//publicPath:"/asses/",//设置该属性后,webpack-dev-server会相对于该路径
},
plugins:[]//插件
}
在控制台输入:
webpack
将会打包一个js文件,上面打包的文件为public/bundle.js。
将会打包一个js文件,上面打包的文件为public/bundle.js。
4.webpack执行参数
webpack --config XXX.js //使用另一份配置文件(比如webpack.config2.js)来打包
webpack --watch //监听变动并自动打包
webpack -p //压缩混淆脚本,这个非常非常重要!
webpack -d //生成map映射文件,告知哪些模块被最终打包到哪里了其中的
webpack --progress //显示进度条
webpack --color //添加颜色
webpack --watch //监听变动并自动打包
webpack -p //压缩混淆脚本,这个非常非常重要!
webpack -d //生成map映射文件,告知哪些模块被最终打包到哪里了其中的
webpack --progress //显示进度条
webpack --color //添加颜色
5.webpack-dev-server
webpack-dev-server是一个小心的nodejs express服务器,很适合做本地测试服务。
a.安装
cnpm install webpack-dev-server --save-dev
b.启动
默认启动命令:webpack-dev-server
webpack-dev-server默认以当前目录为根目录,我们可以使用--content-base来指定根目录。
例如:
webpack-dev-server --content-base bulid/
这里指定了根目录为bulid
c.自动刷新
webpack-dev-server支持2中刷新模式。
-
iframe模式(页面放在iframe中,当发生改变时重载,代码会自动打包,但是浏览器不会自动刷新)
-
inline模式(将webpack-dev-sever的客户端入口添加到包(bundle)中,代码会自动打包,浏览器会自动刷新)
iframe模式
使用该模式不需要任何配置,只需要以如下url格式访问即可:
http://host:port/webpack-dev-server/path
例如:http://localhost:8080/webpack-dev-server/index.html
inline模式访问路径为:
启用这种模式分为2种情况:
1 当以命令行启动webpack-dev-server时,需要做两点:
http://host:port/path
例如:http://localhost:8080//index.html
启用这种模式分为2种情况:
1 当以命令行启动webpack-dev-server时,需要做两点:
- 在命令行中添加--inline命令,即:webpack-dev-server --inline
- 在webpack.config.js中添加devServer:{inline:true}
2 当以Node.js API启动webpack-dev-server时,我们也需要做两点:
- 由于webpack-dev-server的配置中无inline选项,我们需要添加webpack-dev-server/client?http://«path»:«port»/到webpack配置的entry入口点中.
- 将<script src="http://localhost:8080/webpack-dev-server.js"></script>添加到html文件中
例如:
注意:默认情况下,webpack-dev-server的端口为8080,监控的是localhost路径,如果需要设置其他路径和端口,可以在webpack.config.js的devserver中配置。
module.exports = {
entry: {
app: [
'webpack-dev-server/client?http://localhost:8080/',
'.c/js/index.js'
]
},
output: {
path: './dist/js',
filename: 'bundle.js'
}
}
注意:默认情况下,webpack-dev-server的端口为8080,监控的是localhost路径,如果需要设置其他路径和端口,可以在webpack.config.js的devserver中配置。