webpack 学习笔记
基于 node 环境, 必须确保 node 已经安装好了。
验证: node -v
npm -v
一些小命令积累: {
$ npm install -g cnpm --registry=https://registry.npm.taobao.org (cnpm代替npm)
cls: 清除(cmd中的命令)
clear: 清除(git中的命令)
}
安装 webpack:
1. 安装 webpack 命令环境
终端: cnpm install webpack -g
验证: webpack --version
2. package.json 工程文件(需要依赖模块,库描述,版本,作者...)
终端: npm init
验证: 生成 package.json 文件
3. 安装本地 webpack
终端: cnpm install webpack -D 解释: (-D 等价于 --save-dev, 会配置到 webpack.json 的 devDependencies 属性中; --save, 会配置到 webpack.json 的 dependencies 属性中)
验证: 本地文件下多了个 node_modules 目录
`````````````````````````````````````````````````````````````
webpack 使用:
1) webpack 第一个小例子:
准备:
index.html 首页文件 (编写页面, 载入bundle.js,它是通过webpack编译打包的)
entry.js 入口文件 (编写js源码)
说明: entry.js的源码通过编译打包后,被index.html引入。
怎么编译 entry.js 文件 ?
终端: webpack entry.js bundle.js (必须当前目录下)
2) webpack 第二个小例子(自动解决依赖commonJs规范):
准备:
exports1.js 模块文件,然后被 entry.js 引入,然后 webpack entry.js bundle.js 编译打包成 bundle.js, 遵循commonJs规范。
3) webpack 默认只支持 javascript 文件模块化
要转化css或者图片等其他,需要用加载器(loader),
loader类似一种转化器, 他可以把一个东西转成另一个东西
载入css文件:
准备:
style.css 被entry.js引入,然后编译打包, 但是不能直接编译css文件。
需要安装2个模块:
style-loader
css-loader
终端: cnpm install style-loader css-loader -D
使用: require('style!css!./style.css')或者require('style-loader!css-loader!./style.css'); 说明: 在webpack中多个loader加载使用 ! 连接
4) 配置 webpack.config.js 使用很方便 (每次编译打包都使用 webpack entry.js bundle.js 麻烦)
作用: 配置一些 webpack 需要的入口, 出口, loader
webpack 终端一些命令:
webpack 开发环境下编译(打包)
webpack -p 生产环境下编译(压缩)
webpack -w watch监听文件改动,自动编译(速度快,只要在浏览器点击刷新,即可刷新了,不需要webpack一下)
webpack -d 开启(生成)source maps(对我来说是必须的,我要调试,哈哈)
webpack -dwp 一次性都开启(就这么一个命令就够了)
但是webpack.config.js中配置了 devtool: 'source-map', 所以以后直接用 webpack -wp 即可
5) Es6 -> babel转化
babel使用:
终端: cnpm install babel-loader babel-core babel-preset-es2015 -D
安装完,不一定可以使用,需要配置如下:
配置babel预设:
1). webpack.config.js
babel: {
"presets": ["es2015"]
} // 不推荐
2). babelrc配置 通过 touch .babelrc 生成
{
"presets": ['es2015']
}
`````````````````````````````````````````````````````````````
webpack.config.js 配置
module.exports = {
entry: './js/entry.js',
output: {
filename: 'js/bundle.js'
},
devtool: 'source-map',
module: {
loaders: [{
test: /\.css$/,
loader: 'style!css'
}, {
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}]
}
};
