简单易懂的webpack入门
本文比较初级且详细易懂适合没怎么接触过Webpack,而又对webpack感兴趣的人参考;
最近这些天有几个朋友在刚开始使用webpack中遇到问题,所以想写一篇自己的理解,因为水平有限但是尽力让本文一目了然;
nodejs与npm
webpack
- webpack安装
- webpack打包
- loader——模块加载器
webpack配置说明
- webpack.config.js基础配置
- webpack-dev-server自动刷新页面
- html-webpack-plugin自动生成页面
nodejs与npm
nodejs安装
http://nodejs.cn/————————————————————node官网下载安装nodejs
npm是随同NodeJS一起安装的包管理和分发工具
https://www.npmjs.com/———————————————↑npm官网↑
关于NPM的简单命令
win+R 弹出窗口 输入cmd 或 鼠标右键点击屏幕左下角win标 ->选择 命令提示符/命令提示符(管理员)
d: //进入你项目存放的盘;
cd demo //进入项目内;
cd.. //返回上一层
XXXXX -v //查看版本可用作验证是否安装成功 例如 webpack -v(webpack版本号)
----------------------------------------------------
npm init //创建package.json文件;
一路回车即可后边想改的时候可以打开 package.json文件 更改
npm install 模块名 -g/--save-dev/--save //安装模块;
//-g 全局安装;
//--save 会把依赖包名称添加到 package.json 文件 dependencies 下 产品模式用;
//--save-dev 会把依赖包名称添加到 package.json 文件 devDependencies 下 开发模式用;
例如 npm install react(当前目录下安装)npm install react -g(全局安装)//模块名=react 安装成功后文件下会多出一个node_modules文件夹; 安装的时候想加载依赖里边的话 就加上--save-dev
npm update 模块名 //更新模块;
npm uninstall 模块名 //卸载模块;
npm info 模块名 //查看版本号例如 npm info react;
webpack
webpack是模块加载器兼打包工具,Gulp与Grunt是一种能够优开发流程的工具,由于webpack的模块化的优点某种程度上可以替代而已。webpack的工作原理是通过配置唯一入口文件,将从这个文件开始找到你项目中所有依赖的文件,使用loaders处理它们并打包成为一个浏览器可识别的JavaScript文件。
安装webpack
在命令提示行内输入
npm install webpack -g //全局安装webpack
webpack -v //查看 webpack 版本号
下面我们在demo文件夹下建立一个新的文件夹和一个新的html文件
一个新的html文件例如 index.html
命名随意 例如建立一个名为app的文件夹!在app内建立二个新的js文件例如index.js 与 app/js
在app.js内写入
module.exports = "我是app内文件的内容";
在index.js内写入
var app= require('./app.js'); //当前目录下
document.body.innerHTML = "<div>"+app+"</div>";
此方法可以将多个文件引入到 index.js内的入口文件内
------------------------------------------------
另一种兼容的写法
define(["./app.js"],function (str){
document.body.innerHTML = "<div>"+str+"</div>";
})
此方法跟上边一种一样。推荐上一种方法;
用webapck打包
webpack app/index.js build/build.js
↑入口文件 ↑打包到文件
打开index.html编辑 打包后只用引入打包完的build.js
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
</style>
<script>
</script>
</head>
<body>
<script src="build/build.js"></script>
</body>
</html>
打开index.html
安装loader——模块加载器
npm install css-loader style-loader //处理css文件和样式 不同的loader用空格隔开一次加载多个
更多的loader地址http://webpack.github.io/docs/using-loaders.html
webpack配置
module.exports配置项
devtool: 'eval-source-map'//配置生成Source Maps,选择合适的选项
entry: //打包的入口文件 String|Object
output: //配置打包结果 Object
path: //定义输出文件路径
filename: //指定打包文件名称
module: //定义了对模块的处理逻辑 Object
loaders: //定义了一系列的加载器 Array
[{
test: //正则,匹配到的文件后缀名
loader/loaders:string|array, //处理匹配到的文件
include:String|Array //包含的文件夹
exclude:String|Array //排除的文件夹
}]
resolve:{
extensions:['.js',".css",'jsx'] //自动补全识别后缀
}
在demo文件夹内建立一个新的js文件,名为webpack.config.js并且打开编辑
module.exports = {
entry:__dirname +"/app/index.js",
output:{
path: __dirname + "/build",
filename:"build.js"
},
module:{
loaders:[
{
test: /\.css$/,
loaders:["style-loader","css-loader"]//添加对样式表的处理 现在的版本一定要加上-loader
//loader: 'style-loader!css-loader' 这种写法也是兼容的;
}
]
},
resolve:{
extensions:[".js",".css","jsx"] //自动补全识别后缀
}
}
下面我们给刚才的文件加一些css
在app文件夹下新建一个 style.css文件且随便给点样式
div{
color: red;
font-size: 50px;
}
在index.js文件内编辑 且不用带文件后缀名了
var app= require('./app');
require('./style');
document.body.innerHTML = "<div>"+app+"</div>";
webpack-dev-server自动刷新页面
安装
npm install webpack-dev-server -g
启动
webpack-dev-server
//启动成功后 键入http://localhost:8080/访问——默认的端口是8080可以根据配置文件设置;
//如果端口号冲突的话可以更改一下
webpack-dev-server --port 3000
//此时启动了服务器服务
//打开index.html文件更改一下script的路径改成,因为热加载的时候刷新的页面 build.js 是在内存中生成的,那么内存中是不存在build文件夹的所以要去掉;
<script src="build.js"></script>
//在npm下 ctrl+c 两次 关闭服务 重新键入
webpack-dev-server --hot --inline //热加载成功更改内容自动刷新页面
//文件的配置
打开package.json编辑
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack-dev-server --hot --inline"
},
"author": "",
"license": "ISC"
}
//如果需要改端口
"build":"webpack-dev-server webpack-dev-server --port 3000 --hot --inlin"
//运行npm下输入 就不用繁琐的输入那么多了;
npm run build
重点就是如果本地的情况下index.html的路径 跟 热加载下的路径的改变原理就是前文所说的存在内存中与打包给本地;
webpack.config.js中去配置服务
module.exports = {
entry:__dirname +"/app/index.js",
output:{
path: __dirname + "/build",
filename:"build.js"
},
module:{
loaders:[
{
test: /\.css$/,
loaders:["style-loader","css-loader"]//添加对样式表的处理 现在的版本一定要加上-loader
//loader: 'style-loader!css-loader' 这种写法也是兼容的;
}
]
},
devServer: {
port:"9000",//设置默认监听端口,如果省略,默认为”8080“
hot:true,//热加载
inline: true,//实时刷新
historyApiFallback: false,//是否可以回退
},
resolve:{
extensions:[".js",".css","jsx"] //自动补全识别后缀
}
}
配置项很多可以参考
http://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option
html-webpack-plugin自动生成页面
安装
npm install html-webpack-plugin --save-dev
启动
//在webpack.config.js中去配置头部引入
var htmlWebpackPlugin = require('html-webpack-plugin');
//并且添加plugins配置
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:__dirname +"/app/index.js",
output:{
path: __dirname + "/build",
filename:"build.js"
},
module:{
loaders:[
{
test: /\.css$/,
loaders:["style-loader","css-loader"]//添加对样式表的处理 现在的版本一定要加上-loader
//loader: 'style-loader!css-loader' 这种写法也是兼容的;
}
]
},
devServer: {
port:"9000",//设置默认监听端口,如果省略,默认为”8080“
hot:true,//热加载
inline: true,//实时刷新
historyApiFallback: false,//是否可以回退
},
plugins:[
new htmlWebpackPlugin({
title:"我是那个新的"
})
],
resolve:{
extensions:[".js",".css","jsx"] //自动补全识别后缀
}
}
//重新用webpack打包后 运行 npm run build 此时build 目录下会自动新生产一个html
打包两个或更多文件
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:{
build:__dirname +"/app/index.js",
build_new:__dirname +"/app/index_new.js"
},
output:{
path: __dirname + "/build",
filename:"[name].js"
},
module:{
loaders:[
{
test: /\.css$/,
loaders:["style-loader","css-loader"]//添加对样式表的处理 现在的版本一定要加上-loader
//loader: 'style-loader!css-loader' 这种写法也是兼容的;
}
]
},
devServer: {
port:"9000",//设置默认监听端口,如果省略,默认为”8080“
hot:true,//热加载
inline: true,//实时刷新
historyApiFallback: false,//是否可以回退
},
plugins:[
new htmlWebpackPlugin({
title:"我是第一个",
chunks:["build"]
}),
new htmlWebpackPlugin({
title:"我是第二个",
filename:"index_new",
chunks:["build_new"]
})
],
resolve:{
extensions:[".js",".css","jsx"] //自动补全识别后缀
}
}
多个webpack.config.js配置文件
新建一个 webpack.html.config.js或其他的名字的文件内部配置根据上文更改
//在package.json中配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start_html":"webpack --config webpack.html.config.js",
"build": "webpack-dev-server --hot --inline"
}
//启动对应的webpack
npm run start_html
上述就是一些webpack的基础配置。