webpack入门

安装webpack:

1
npm install webpack -g

新建文件夹,创建package.json,填写配置信息:

1
2
3
mkdir webpack
cd webpack
npm init

在文件夹中创建新的文件夹与文件,目录结构如下:

webpack
| |--app
|   |--index.js
|   |--sub.js
| |--package.json
| |--webpack.config.js

编写sub.js:

1
2
3
4
5
6
7
function generateText() {
var element = document.createElement('h2');
element.innerHTML = "Hello h2 world";
return element;
}
module.exports = generateText;

编写index.js:

1
2
3
4
5
6
7
8
var sub = require('./sub');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(sub());
document.body.appendChild(app);

使用插件快速生成HTML:

1
npm install html-webpack-plugin --save-dev

编写webpack.config.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var path = require('path');
//插件声明如下
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
module.exports = {
//项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
entry: APP_PATH,
//输出的文件名 合并以后的js会命名为bundle.js
output: {
path: BUILD_PATH,
filename: 'bundle.js'
},
//添加我们的插件 会自动生成一个html文件
plugins: [
new HtmlwebpackPlugin({
title: 'Hello World app'
})
]
};


安装webpack-dev-server:

1
npm install webpack-dev-server --save-dev

在webpack.config.js中添加配置:

1
2
3
4
5
6
7
8
9
10
module.exports = {
....
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
},
...
}

在package.json中配置以下命令:

1
2
3
4
5
...
"scripts": {
"start": "webpack-dev-server --hot --inline"
},
...

(依赖此插件此配置,在js任意修改内容然后保存,浏览器会自动刷新。默认在浏览器中打开localhost:8080就能直接访问到生成的网页了。)


添加CSS样式

1
npm install css-loader style-loader --save-dev

在webpack.config.js中配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
},
...
module: {
loaders: [
{
test: /\.css$/,
loaders: ['style', 'css'],
include: APP_PATH
}
]
},
...
plugins: [
new HtmlwebpackPlugin({
title: 'Hello World app'
})
]

在app文件夹中新建main.css:

1
2
3
h1 {
color: red;
}

在入口文件index.js中引用:

1
require('./main.css');


添加sass样式:

1
npm install sass-loader --save-dev

(使用此loader需要安装依赖npm install node-sass --save-dev)

在webpack.config.js中加上loader:

1
2
3
4
5
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass'],
include: APP_PATH
}

添加sass文件

variables.scss:

1
$red: red;

main.scss:

1
2
3
4
5
@import "./variables.scss";
h1 {
color: $red;
}

在index.js中引用:

1
require('./main.scss');


处理图片和其他静态文件

安装url-loader:

1
npm install url-loader --save-dev

配置webpack.config.js:

1
2
3
4
{
test: /\.(png|jpg)$/,
loader: 'url?limit=40000'
}

(当图片大小小于limit后面的参数限制的时候,会自动启用base64编码图片)

在app文件夹下新建imgs文件夹,然后修改main.scss:

1
2
3
4
h1 {
color: $red;
background: url('./imgs/avatar.jpg');
}


添加第三方库

1
npm install jquery --save-dev

在index.js中引用:

1
var $ = require('jquery');


然后在项目根目录运行:

1
webpack

再输入:

1
npm start

在浏览器中打开localhost:8080查看生成的网页。


添加ES6的支持

1
npm install babel-loader babel-preset-es2015 --save-dev

配置webpack.config.js文件:

1
2
3
4
5
6
7
8
9
10
...
{
test: /\.jsx?$/,
loader: 'babel',
include: APP_PATH,
query: {
presets: ['es2015']
}
},
...

将sub.js改写为:

1
2
3
4
5
export default function() {
var element = document.createElement('h2');
element.innerHTML = "Hello h2 world hahaha";
return element;
}

将index.js改写为:

1
2
3
4
5
6
7
8
9
10
11
12
13
import './main.scss';
import generateText from './sub';
import $ from 'jquery';
import moment from 'moment';
let app = document.createElement('div');
const myPromise = Promise.resolve(42);
myPromise.then((number) => {
$('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>');
});
app.innerHTML = '<h1>Hello World it</h1>';
document.body.appendChild(app);
app.appendChild(generateText());


参考资料:https://zhuanlan.zhihu.com/p/20367175