这里先分解每一步的做法和原因,后面的其他文章会讲怎么快速的搭建webpack。
目录:
一基础篇
1.环境需求
2.NODE_PATH的配置
3.创建项目文件夹
4.安装webpack全局包
5.创建package.json 文档
6.webpack.config.js 配置
二 升级篇
1. 引入自动生成html的插件
2. webpack-dev-server
3. CSS 文件的支持
4. CSS 文件剥离插件
5. 其他css辅助模块
我用的是win10的系统,下面所讲的步骤都是只试用与windows系统。
首先先把webpack配置好,下面是配置步骤:
一、基础篇:
1.环境需求:已安装好nodejs+电脑联网
2.NODE_PATH的配置:cmd调出命令符窗口,然后敲path,在输出的一堆内容里面,会有
C:\Users\XXX\AppData\Roaming\npm; 然后在我的电脑->右键属性->高级系统设置->高级->环境变量->在系统变量 下面->新建->然后变量名敲:NODE_PATH,值:C:\Users\XXX\AppData\Roaming\npm\node_modules。 设好后点确定 确定 确定。
3.创建项目文件夹(并修改文件名),在项目文件夹下面按shift+右键。选择 在此处打开Powershell窗口(中文系统:在此处打开命令窗口) 的选项。在跳出的窗口里
边,输入 node -v ,系统会返回node的版本号。
备注:下面所有的PowerShell窗口都是在项目文件夹根目录打开。
4.安装全局的webpack包,指令:npm install webpack -g 然后按回车键
系统会自动安装,等装好后,敲webpack -v 就能看到webpack的版本号,我当前版本为3.3.0 版本
5.创建package.json 文档
在Powershell下,敲:npm init 回车,接着系统会提示输入相关内容。若不想配置,直接按回车键跳过。
下面是系统相关的提示:
name:reactwebpack +回车键 ,reactwebpack是我这个项目的名字
version:1.0.0+回车键
description:(项目描述信息),这里按回车键直接跳过
entry point:(入口文件)按回车键跳过。入口文件会在下面讲的webpack.config.js 里面陪置
test command: 跳过就好,会面会重新配置这个指令内容。这里先跳过
git repository:(git 库的链接地址)。这里不涉及到git库,直接跳过
keywords:(关键字),直接跳过先
author:(作者),可以输入自己的英文名+回车键
license:(ISC 开源许可证号,与git相关) 这里跳过
Is this ok?(yes) 比对下内容,如果没错,直接输入y+回车键
6 webpack.config .js 配置文件
在项目的根目录下面创建一个webpack.config.js 文件。同时创建一个src文件夹,用来存放源文件。
下面是项目整体文件夹结构:
reactwebpack #项目文件夹
build #正式打包用的文件夹(也有人用dist命名),用于生产环境
node_modules #npm 指令会自动生成
src #用于存放源文件
app.js #在src下面建一个app.js
index.html #在src下面建一个index.html
package.json #webpack 包的项目文件
webpack.config.js #webpack包的配置文件
README.md # 项目说明文档
webpack.config.js 配置内容及说明:
var path=require('path');
module.exports = {
entry:'./src/app.js', //入口文件配置为app.js文件。若入口文件为index.js,这里可以直接写成'./src'
//入口文件很多的话,可以写成下面的格式:
/*
entry:{
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
*/
output: {
filename:'bundle.js',//js合并后的输出的文件,命名为bundle.js
path:path.resolve(__dirname,'build'),//指令的意思是:把合并的js文件,放到根目录build文件夹下面
//publicPath:'',生成文件的公共路径,‘/work/reactweb/dist’ 生产环境下所有的文件路径将会添加这个公共路径
}
//多个入口的输出文件格式
/*
output: {
filename:'[name].js',//name相当于变量,等同于pageOne/pageTwo/pageThree
path:path.resolve(__dirname,'build'),//
}
*/
}
在src文件夹下面,新建一个app.js
var app=document.createElement("div");
app.innerHTML='<h1> Hello World!</h1>';
document.body.appendChild(app);
在src下面创建index.html,并引入bundle.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<title>reactwebpack</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="../build/bundle.js"></script>
</body>
</html>
安装webpack 本地包,在PowerShell 下面敲指令:npm install webpack –save-dev
装好之后,直接敲webpack,若成功将会显示下面内容,并且build文件夹下面将会生成bundle.js
Hash: bba9fbe70c8f6bbe2cd1
Version: webpack 3.3.0
Time: 47ms
Asset Size Chunks Chunk Names
bundle.js 2.58 kB 0 [emitted] main
[0] ./src/app.js 111 bytes {0} [built]
用浏览器打开,src下面的index.html 。就会显示
Hello World!
这样一个最简单的webpack打包配置就建好了。
二、升级篇
- 引入自动生成html的插件
在PowerShell 窗口下面敲指令:
npm install html-webpack-plugin --save-dev
小注:代码运行环境分为开发模式和生产模式,有些插件只是在开发的时候用到。
–save:自动写入json文件的生产模式下的依赖关系(dependencies)。
–save-dev:自动写入json文件的开发模式下的依赖关系(devDependencies)。
插件安装好后,配置webpack.config.js 文件。引入模块,并在module.exports 设置plugins对象值。
var HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
...
//前面的对象后面需要添加逗号隔开
plugins:[
new HtmlwebpackPlugin({
title:'reactwebpack'
/* 全部都是可选项
title:"reactwebpack", 配置html 的title
filename: , html文件的名字,默认是index
template:'', 模板文件路径
inject:true|'body'|'head'|'false', 设置为 true|'body':js文件引入的位置为body的结束标签之前
favicon:'', 设置html的icon图标
minify:{}|false, 暂时不理解这个参数的使用
hash:true|false, 将添加唯一的webpack编译hash到所有包含的脚本和css文件
cache:true|false, 默认为true,仅仅在文件修改之后才会发布
showErrors:true|false, 默认为true,错误信息写入HTML页面中
chunks: 允许添加某些块(比如unit test)
chunksSortMode: 允许控制块在添加到页面之前的排序方式
excludeChunks: 允许跳过模型块,比如单元测试块
*/
})
],
}
在PowerShell 窗口下运行webpack,成功后将,在output设置的路径(这里是build文件夹)下生成index.html。生成的js会自动引入bundle.js,所以模板index.html 不需要再添加bundle.js的引入。
- webpack-dev-server
上面调试,每次都需要先运行webpack指令,再用浏览器打开才能看修改后的结果。怎么简化这个工作?webpack可以引入node.js 的express 服务器,支持热更新,可以每次修改保存后会自动刷新浏览器的内容。
安装webpack-dev-server的指令(辅助开发用的,所以写入开发模式依赖关系):
npm install webpack-dev-server --save-dev
服务器自动刷新方式分为iframe 和inline mode,这里只讲inline mode模式。
webpack 的服务器配置也有两种方法配置:
1.直接再webpack.config.js 文档里边配置。
在package.json文件里面配置,快捷指令。
“scripts":{
"start":"webpack-dev-server --inline --hot"
}
指令的意思:在PoweShell窗口下敲npm start 等效于npm webpack-dev-server -- inline --hot
webpack.config.js 里面的配置:
var webpack=require('webpack');//用于服务器的配置
module.exports ={
...
devServer:{
//contentBase: path.join(__dirname,"dist"),//用于静态文件的目录,不设置默认为当前根目录
// contentBase:[path.join(__dirname,'public'),path.join(__dirname,'assets')],//支持多路径
// publicPath:"/assets", 服务器地址:http://localhost:8080 ,output file:http://localhost:8080/assets/bundle.js
//compress:true,//gzip压缩
//headers:{"X-Custom-Foo":"bar"},
hot:true,//是否启用热更新
port:8080,
historyApiFallback:true,//html5接口,设置为true,所有路径均转到index.html
inline:true,//是否实时刷新,即代码有更改,自动刷新浏览器
stats:{colors:true},//显示bundle文件信息,不同类型的信息用不同的颜色显示
/*
proxy:{ //服务器代理配置
"/api":{ //相对路径已/api打头,将会触发代理
target:"http://localhost:3000", //代理地址
pathRewrite:{"^/api":""}, //路径替换
secure:false //跨域
}
}
*/
},
...
}
配置好后在PowerShell窗口敲npm start 启动服务器。
第一次尝试修改js时,如果浏览器的console控制台显示[HMR]Waitiing for update signal from WDS…,但此时网页内容没有刷新时。可以在PowerShell用ctrl+c来停止当前进程。页面就可以刷新过来。 连按两次ctrl+c,PowerShell 就会提示是否停止服务器,敲y回车就可以停掉服务器。
2. 重新建一个server.js ,专门用于服务器的配置。(推荐使用这种方式)
在根目录上创建一个server.js
在package.json文件里面配置,快捷指令,指定对应的配置文件。
"scripts": {
"start":"node server.js"
},
server.js 的配置:
var webpack = require('webpack');//引入webpack模块
var webpackDevServer = require('webpack-dev-server');//引入服务器模块
var config = require('./webpack.config');//引入webpack配置文件
var server = new webpackDevServer(webpack(config),{
//contentBase: path.join(__dirname,"dist"),//用于静态文件的目录,不设置默认为当前根目录
// contentBase:[path.join(__dirname,'public'),path.join(__dirname,'assets')],//支持多路径
// publicPath:"/assets", 服务器地址:http://localhost:8080 ,output file:http://localhost:8080/assets/bundle.js
//compress:true,//gzip压缩
//headers:{"X-Custom-Foo":"bar"},
hot:true,//是否启用热更新
historyApiFallback:true,//html5接口,设置为true,所有路径均转到index.html
inline:true,//是否实时刷新,即代码有更改,自动刷新浏览器
stats:{colors:true},//显示bundle文件信息,不同类型的信息用不同的颜色显示
/*
proxy:{ //服务器代理配置
"/api":{ //相对路径已/api打头,将会触发代理
target:"http://localhost:3000", //代理地址
pathRewrite:{"^/api":""}, //路径替换
secure:false //跨域
}
}
*/
});
//将其他路由,全部返回index.html
server.app.get('*',function(req,res){
res.sendFile(__dirname+'/build/index.html');
});
server.listen(8080,function(){
console.log('正常打开8080端口')
});
若要启动node js api 的热更新功能,需要修改webpack.config.json 的entry的代码。
注意:在用webpack生成最终的build文件用于生产环境的时候,请先把热更新代码屏蔽掉,否则运行build里面的index.hmtl 时,会一直报错: GET http://localhost:8080/sockjs-node/info?t=1510883222453 net::ERR_CONNECTION_REFUSED msgClose @ client:164 abstract-xhr.js:132。
module.exports = {
entry: {
app:[
'webpack-dev-server/client?http://localhost:8080', // 热更新监听此地址
'webpack/hot/dev-server', // 启用热更新
path.resolve(__dirname, 'src', 'app')
]
},
...
plugins:[
...
new webpack.HotModuleReplacementPlugin(),//热更新配套插件
...
]
}
3.CSS 文件的支持
在实现webpack的基本配置和服务器的热更新后,我们将会考虑网页的具体实现(html+CSS+JS)。webpack是基于nodeJS平台,完全支持JS文件不支持css。所以要把css转成JS文件。webpack提供了一个两个模块来支持css文件转编译。
style-loader:将css内容插入到html的style
css-loader:处理css里面的@import 和url() 的内容,需要url-loader 和file-loader的支撑
file-loader: 用MD5 hash加密文件名后返回相应的路径
url-loader 在file-loader 基础上加了额外的功能。当链接的文件小于limit 8192时,可以直接返回DataURL。DataURL是图片格式转换成base64编码的字符串,并存储在URL中。这样可以减少客户端的请求次数
引入这两个loader的方法:
先安装着两个模块,相关的指令(用于开发模式的依赖):
npm install css-loader style-loader --save-dev
npm install url-loader file-loader --save-dev
修改webpack.config.js 的配置
module.exports ={
...
module:{
rules:[{
test:/\.css$/,
use:['style-loader','css-loader'],
},
{ //配置辅助loader
test:/\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader:'url-loader',
options:{limit:8091}
}
]
},
...
resolve:{
extensions:['.js','jsx','less','.css','.scss']//后缀名自动补全
}
}
在src文件夹下面创建两个文件夹:
src
css
css.css
img
7.png
css.css 里面的代码:
div{
background:url('../img/7.png') no-repeat 211px 0px ;
}
app.js 入口文件导入css文件
require('./css/css');
都配置好后
在PowerShell 下敲npm start 运行服务器,浏览器上输入http://localhost:8080/
- CSS 文件剥离插件
css文件和html混合,这不符合html的优化思路。所以要求webpack生成的最终文件css也是单独一个文件。这里webpack提供了extract-text-webpack-plugin插件。
安装的指令:
npm install extract-text-webpack-plugin --save-dev
修改webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
...
module:{
rules:[{
test:/\.css$/,
use:ExtractTextPlugin.extract({ //使用ExtractTextPlugin 插件
fallback:"style-loader",
use:"css-loader"
}),
},{ //配置辅助loader
test:/\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader:'url-loader',
options:{limit:8091}
}
]
},
...
plugins:[
...
new ExtractTextplugin("styles.css"), //插件声明
],
...
}
停掉服务器,然后敲webpack 指令就会看到build文件下的styles.css 文件。
5.其他css辅助模块
less 模块 sass模块 前缀postcss模块
安装指令:
npm install sass-loader node-sass webpack --save-dev
npm install less-loader less --save-dev
npm i -D postcss-loader
在src文件夹下创建两个文件夹(less,scss)及相应的文件:
less.less:
@color:#f938ab;
div{
color:@color;
}
scss.scss:
$font-stack:Helvetica,sans-serif;
$primary-color:#333;
div{
font:100% $font-stack;
border:1px solid $primary-color;
}
在app.js 里面引用
在根目录上创建postcss.config.js(webpack 会自动找到这个文件):
module.exports = {
plugins:{
'autoprefixer': {},
}
}
webpack.config.js 里面配置:
module.exports ={
...
module:{
rules:[
{
test:/\.css$/,
use:ExtractTextPlugin.extract({//使用ExtractTextPlugin 插件
fallback:"style-loader",//用于开发环境
use:["css-loader","postcss-loader"]
}),
},{ //配置辅助loader
test:/\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader:'url-loader',
options:{limit:8091}
},
{
test:/\.less$/,
use:ExtractTextPlugin.extract({//使用ExtractTextPlugin 插件
fallback:"style-loader",//用于开发环境
use:["css-loader","postcss-loader","less-loader"]
}),
},
{
test:/\.scss$/,
use:ExtractTextPlugin.extract({//使用ExtractTextPlugin 插件
fallback:"style-loader",//用于开发环境
use:["css-loader","postcss-loader","sass-loader"]
}),
}
]
},
...
}
参考资料:http://www.cnblogs.com/haogj/p/5160821.html
https://webpack.js.org/api/node/
http://www.css88.com/doc/webpack2/api/cli/
http://www.cnblogs.com/xuehaoyue/p/6410095.html
http://blog.csdn.net/lx376693576/article/details/54591142
https://zhuanlan.zhihu.com/p/20367175?columnSlug=FrontendMagazine
https://github.com/webpack-contrib/extract-text-webpack-plugin