安装：基于nodejs下面安装
命令：npm install webpack -g或者 npm install webpack -g --registry=https://registry.npm.taobao.org
webpack 简介
一款模块加载器兼打包工具
支持AMD/CMD写法
处理依赖关系，然后解析出模块之间的依赖，将代码打包
把各种资源，都作为模块来使用和处理。
比如 js css Less Sass等。。。
安装后就在命令行中使用 webpack命令
把依赖写入 package.json
npm install webpack --save-dev
webpack命令
打包命令 webpack entry.js output.js
entry.js 打包的入口文件
output.js 打包后的文件//运行命令后生成的js文件，
例子：导入js文件
入口文件: index.js
var str = require('./app.js');//通过AMD或CMD语法定义依赖资源
document.body.innerHTML = str;
依赖文件: app.js
module.exports = 'hello world';
运行`webpack index.js output.js, `就会将index.js和它的依赖app.js都打包到同一个文件output.js中，所以我们直接调用output.js就好
index.html//里面导入打包好的js文件，
<script src="output.js"></script>
模块加载器(loader)
webpack不只可以打包js, 还可以打包css,图片..等等其他资源， 只是要加载相应的加载器
在本地安装：npm install style-loader 和npm install css-loader;//会安装在 node_modules里面
例子：导入css 或者图片文件
1，在入口文件导入css文件，需要导入加载器
require('style-loader!css-loader!./index.js')
入口文件: app/index.js
//通过AMD或CMD语法定义依赖的css资源
//但是需要额外的加载器来处理css, 这里需要两个加载器style-loader和css-loader
//css-loader是用来处理css文件的, style-loader是用来解析css语法的
//加载器的顺序不能打乱，加载器是从右到左依次执行的
require('style!css!./css/style.css');
var str = require('./app.js');
document.body.innerHTML = str;
这样， 我们就把style.css也打包到ouput.js中，再index.html就不需要导入style.css
index.html
<!-- 猜想： css的导入可能是通过output.js动态生成／ -->
<!-- <link rel="stylesheet" href="app/css/style.css"> -->
<script src="build/build.js"></script>
注意： 加载器需要安装，各种不同文件类型的资源, Webpack 有对应的模块 loader
安装加载器
npm install xxx-loader --save-dev
例如：css-loader style-loader 处理css文件和样式
更多参考
webpack配置文件
配置之后，直接运行 webpack命令跑起来
使用webapck.config.js把所有配置放在一起，
webpack有很多参数，有时我们使用配置文件更方便
webpack配置文件取名为 webapck.config.js, 我们在配置文件的相同路径下运行webpack命令，
就会使用配置文件中的信息作为我们的参数
配置文件说明:
文件名：webpack.config.js
module.exports = {
entry: './src/index.js', //打包的入口文件 String|Object
output: { //配置打包结果 Object
path: './build/', //定义输出文件路径
filename: 'build.js', //指定打包文件名称
},
module: { //定义了对模块的处理逻辑
loaders: [ //定义了一系列的加载器 Array
{
test: /\.css$/, //正则，匹配到的文件名
//处理匹配到的文件, 这样我们就用js文件写入相应的加载器了
//直接写require('./css/style.css')
loaders: ['style-loader', 'css-loader']
}
]
},
resolve: {
//自动补全识别后缀
//require('./css/style'); 可以不用写后缀名了
extensions: ['.js', '.css', 'jsx']
}
}
webpack-dev-server
轻量级的服务器
安装webpack-dev-server
npm install webpack-dev-server -g
安装后在命令行中使用 webpack-dev-server命令启用服务
npm install webpack-dev-server --save-dev
把依赖写入 package.json
自动刷新
如果没有安装在全局中，安装在node_modules里
在根目录下使用命令：..\node_modules\.bin\webpack-dev-server --hot --inline
安装在全局中
使用命令webpack-dev-server --hot --inline做到自动刷新
注意： 使用webpack-dev-server命令生产的打包文件是在内存中，不会真的生成打包文件(build/build.js), 而且路径是在当前路径下, 所以我们应该这么调用
index.html
<!-- 注意不是我们配置文件中build/build.js, 因为并不会真的生成， 而是在内存中， 路径为当前路径下 -->
<script src="build.js"></script>
在webpack.config.js中配置服务
devServer: {
//服务器根目录
contentBase: './build/'
}
注意 ： hot和inline这两个比较特殊， 必须在命令行中写入
参考
自动生成html文件
html-webpack-plugin
安装：
npm install html-webpack-plugin --save-dev
使用:
在webpack.config.js中引入
var htmlWebpackPlugin = require('html-webpack-plugin');
在plugins中配置:
plugins:[
new htmlWebpackPlugin({
title:"首页"
})
]
多个打包文件
webpack.config.js
{
entry: {
//键值为模块名
build: './app/index.js',
build2: './app/index2.js'
}
output:{
path: './build/',
name: '[name].js'//将文件名换成[name], 根据定义模块名生成相应的输出(build.js,build2.js)
}
}
那我们在生成html的时候就可以指定具体使用哪个模块
plugins:[
new htmlWebpackPlugin({
title:"首页",
chunks: ['build']//生成的HTML,并自动导入生成的js文件
}),
new htmlWebpackPlugin({
title:"build2",
filename: 'index2.html',//html文件名，不指定默认为index.html
chunks: ['build2']//指定导入打包后的js文件，可以多个
})
]
babel 转码器
作用: 将ES6代码转为ES5代码
安装babel-cli
npm install babel-cli -g
转换命令：babel app.js --out-file build.js
注意： 直接运行发现，并没有把代码转成es5
还需要在目录下创建.babelrc文件，设置为
preset是预处理的意思
{"presets": ["es2015"]}
并且还需要安装：
npm install --save-dev babel-preset-es2015
webpack+babel
使用webpack将es6转成es5
使用babel-loader
需要安装
npm install babel-loader --save-dev
在webpack.config.js中加入对应的处理
{
test: /.js$/,
loader: 'babel?presets[]=es2015',//传入参数
}
注意在本地也要安装babel-cli
npm install babel-cli --save-dev
webpack+react
首先我们需要安装3个模块
npm install react react-dom babel-preset-react --save-dev
react和react-dom是我们需要的react库, 作为我们需要导入的库文件，
var React = require('react');
var ReactDOM = require('react-dom');
babel-preset-react 是用来转换jsx语法的
在loader中修改为：
{
test: '/\.js$/',
//如果没有用es6可以不用加presets[]=es2015预处理
loader: 'babel?presets[]=es2015&presets[]=react'
}
热加载
如果改变某个组件，不会整体刷新网页，只改变修改的部分
安装 react-hot-loader
npm install react-hot-loader --save-dev
在loader中修改为：
var path = require('path');
{
test: '/\.js$/',
loaders: ['react-hot','babel?presets[]=es2015&presets[]=react'],
include: path.resolve(__dirname, 'react'),
exclude: '/node_modules/'
}
浏览器调试
1，安装chrome 的插件，react dev tools
2，在配置文件，配置：
devtool: 'source-map'
使用react的基本结构
注意json 数据文件的格式
[{
"userName": "xxxx",
"content": "yyyy",
"id": 1
}, {
"userName": "ddddd",
"content": "ccccc",
"id": 2
}, {
"userName": "ddddd",
"content": "ccccc",
"id": 3
}]
1.入口文件：index.jsx
require('./style.css');//导入css文件
//如果使用bootstrap,需要导入的组件,要先在库里面安装后才能使用
require('bootstrap/dist/css/bootstrap.css');
//导入json数据文件
var data = require('./data.json');
var container=document.querySelector('.container');//获取dom元素
var React=require('react');//导入react库，
var ReactDOM=require('react-dom');//导入react-dom库，才能使用ReactDOM
var MainComponent=require('./MainComponent');//导入定制的组件
//图片路径的添加方式
data.forEach(function(item,i){
item.imgUrl=require('./img/1.jpg')//给ImgData的每项添加一个imgUrl属性，为图片路径
})
ReactDOM.render(
<MainComponent/>,
container
)
2.配置文件webpack.config,js
var path = require('path');//配置出口文件路径
module.exports = {
entry: './src/index.jsx',
output: {
path: './build/',
filename: 'build.js'
},
module: {
loaders: [{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}, {
test: /\.jsx$/,
loaders: ['babel-loader?presets[]=es2015&presets[]=react']
},{
//导入bootstrap需要配置的文件
test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
loaders: 'url-loader?limit=8192'
}, {//导入json需要配置的信息
test: /\.json$/,
loaders: ['json-loader']
}]
},
//改变端口号
devServer：{
contentBase:'./src',//改变服务器的根目录
port:4000
}，
//调试工具
devtool:'source-map',
resolve: {
//自动补全识别后缀
//require('./css/style'); 可以不用写后缀名了
extentions: ['', '.js', '.css', '.jsx']
}
}
网友评论