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
$ webpack
webpack
敕令会优先读取项目中的 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/
若有不正的地方,迎接斧正。