Webpack4.x 教程
最近刚用完gulp又来捣鼓捣鼓webpack，这只是个简单的新手入门教程...不多说；
注意：安装webpack前检查nodejs的安装目录路径是否存在空格(Program Files (x86))，建议安装在无空格文件夹目录下。
安装
全局安装（以管理员身份运行命令行）
$ npm install webpack -g初始配置文件 package.json （一直回车，就会在项目目录下生成该文件）
$ npm init到项目目录安装，将 webpack 添加到 package.json
$ npm install webpack --save-dev安装完成后，打开 package.json 将会看到如下代码
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^1.13.0"
}
}同时还可以选择，安装不同的版本
$ npm install webpack@1.2.x --save-dev举颗栗子
在项目目录下创建入口文件 entry.js
vim entry.js
document.write("hello webpack!");创建 index.html
vim index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<script type="text/javascript" src="./bundle.js"></script>
</body>
</html>Run一下
$ webpack ./entry.js bundle.js --colors如果成功，会显示如下代码
Version: webpack 1.13.0
Time: 34ms
Asset Size Chunks Chunk Names
bunble.js 1.42 kB 0 [emitted] main
[0] ./entry.js 33 bytes {0} [built]接下来打开 index.html 如果页面上显示 hello webpack 说明已经成功第一步了
hello webpack添加一个文件
vim content.js
module.exports = "这里是 content.js 的内容！";更新一下 entry.js
document.write(require("./content.js"));继续Run一下
$ webpack ./entry.js bundle.js --colors打开 index.html 将会看到
这里是 content.js 的内容！打包CSS
安装 css-loader , style-loader 模块
其他模块：http://webpack.github.io/docs...
.css文件使用style-loader和css-loader来处理.js文件使用jsx-loader来编译处理.scss文件使用style-loader、css-loader和sass-loader来编译处理
$ npm install css-loader --save or $ npm install css-loader --save-dev添加文件 style.css
vim css/style.css
body{
font-size: 36px;
}更新 entry.js
require("!style!css!./css/style.css");
document.write(require("./content.js"));Run一下
$ webpack ./entry.js bundle.js --colors加载器测试
更新 entry.js
- require("!style!css!./css/style.css");
+ require("./css/style.css");
document.write(require("./content.js"));Run一下
$ webpack ./entry.js bundle.js --module-bind 'css=style!css'使用 webpack.config.js
每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。
vim webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};Now we can just run
$ webpackwebpack 命令会优先读取项目中的 webpack.config.js 文件
一些参数
- --progress 打印打包日志
- --colors 带颜色的日志
- --watch 监控自动打包
- -d 生成map映射文件
- -p 压缩混淆脚本
开发服务器
$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors服务器可以自动生成和刷新，修改代码保存后自动更新画面
http://localhost:8080/webpack-dev-server/bundle很棒的DEMO
我是写完这个才发现这个教程的...不过不晚
传送门：https://github.com/ruanyf/web...
Reference API
官网： http://webpack.github.io/
文档： http://webpack.github.io/docs/
如有不正之处，欢迎指正。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。