webpack 基础入门
webpack基础入门
基于node环境（webpack，glup，grunt）
前身是browserify，缺点：只能转换js
webpack的作用：
一切都是模块化，（css,js,图片等）
一个模块加载器，打包工具
安装webpack
流程：
1.安装webpack命令环境
cnpm install webpack -g
验证是否ok?
webpack –version
2.package.json 工程文件（需要依赖模块，库描述，版本，作者…）
npm init
3.安装本地webpack
cnpm install webpack -D
webpack第一个小例子
index.html 页面
entry.js 入口文件
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div>webpackdiv>
<script src="bundle.js">script>
body>
html>entry.js
document.body.style.backgroundColor = '#00f'终端执行：
webpack entry.js bundle.js
在浏览器打开文件看下效果~~
自动解决依赖
webpack 默认支持的是commonJs 规范
webpack默认只支持js文件
加载其它文件需要使用loader
loader类似一种转换器，它可以将一个东西转换为另一个
加载css文件：
style-loader
css-loader
less-loader
postcss-loader
执行下面命令
cnpm install style-loader css-loader less-loader postcss-loader -D
注意：在webpack中，多个loader加载 “!”链接多个loader
遇到的问题：Module build failed: Error: No PostCSS Config found in: 文件名
解决办法：在webpack.config.js同级目录下面加一个postcss.config.js
postcss.config.js
module.exports = {
plugins: {
'autoprefixer': {}
}
}图片的压缩 转base64
url-loader 加载器
下载
cnpm install url-loader –save-dev
webpack.config.js
{
test:/\.(png|jpg)/,
loader:'usr-loader?limit=8000&name=image/[hash:9].[name].[ext]'
}遇到的问题：
Module build failed: Error: Cannot find module 'file-loader'
解决：cnpm install file-loader --save-dev
配置webpack.config.js 最好用这个名字
作用：配置一些文件的入口、出口、loader
终端：
webpack 开发环境下编译（打包）
webpack -p 生产环境下编译（压缩）
webpack -w 监听文件的改动自动编译（速度快）
webpack -d 开启（source maps 用来调试）
如果不用webpack.config.js 自己定义的名字：config.js
执行下面命令
webpack –config config.js
es6 -> babel转化
babel使用：
cnpm install babel-loader babel-core babel-preset-es2015 -d
小例子ES6语法：
导出模块：
export default {}
使用模块：
import xx from 模块名
babel的预设配置：
1》webpack.config.js
babel:{
'presets':['es2015']
}
2》在命令行执行 touch .babelrc
{
'presets':['es2015']
}
遇到的问题：发现import报错
需要下载
babel-preset-stage-2
babel-plugin-transform-decorators
babel-plugin-transform-runtime
.babelrc 配置修改
{
'presets':['es2015','stage-2']
}webpack-dev-server webpack配置服务器
安装命令环境：
cnpm install webpack-dev-server -g
参数：
webpack-dev-server –port 9090 端口号
webpack-dev-server –inline 修改完代码时，实时更新
webpack-dev-server –hot 热重载（局部更改）
1>终端：webpack-dev-server –port 9090 –inline –hot
2>在webpack-config.js
devServer:{
port:'9090',
inline:true
}3>把运行的命令放到package.json
"scripts":{
'dev':'webpack-dev-server --port 9090 --inline --hot'
}遇到的问题：Cannot find module 'webpack/bin/config-yargs'
原因：因为webpack和webpack-dev-server的版本不匹配导致的
webpack版本：1.13.2
webpack-dev-server版本：1.15.0
可以使用npm uninstall webpack-dev-server -g
再安装npm install [email protected]
resolve 配置省略的后缀名，别名
resolve:{
'extensions':['','.js','.css','.json'] 可以省略的后缀名
}