什么是webpack?
按我现在的理解,webpack是一个静态资源打包工具。把js,css,less,scss,图片等资源压缩合并,然后打包成上线版本。
如何在自己项目中使用webpack2?
1, 安装webpack
npm install webpack -S
2,配置webpack.config.js文件
先来个简单的配置:
// webpack和Node一样,都是遵循common.js 所以这里是require来引用文件。 path是node的core文件,不需要手动安装,直接可以引包来使用
const path = require('path');
module.exports = {
// 配置入口文件
entry: './main.js',
// 配置出口文件
output: {
// 在webpack2中,此处需要使用绝对路径
// path.resolve 是Node中转绝对路径的函数
path: path.resolove(__dirname, './dist'),
// 此处是配置文件名,因为我们想最后生成的js和index分开来存放,所以这里要把js单独放置在js文件夹下
filename: 'js/bundle.js'
}
}
此时,我们在根目录里新建一个 main.js
文件。
ES6 模块风格
import js from './src/components/header/header';
or:
CMD 模块风格
require('./src/components/header/header')
此刻我们在’./src/components/header/header’ 中创建header.js文件
alert(1);
现在,打开我们命令行工具:
webpack
OK了!~
这远远不符合我们的工作需求,我们一般都是在根目录有一个index.html,我们通常希望生成的index.html能和根目录中index.html建立联系。我们上线的时候,通常希望文件名是一个[hash].js。因为我们迭代的时候我们不希望客户端使用缓存文件,那么生成的js文件的名字是不固定的,那我们上个例子中直接在index中引用固定名字的方法是行不通的。
3, html-webpack-plugin
npm install html-webpack-plugin -S
webpack.config.js
const path = require('path');
const htmlWebapckPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[hash].js'
},
plugins: [
new htmlWebapckPlugin({
title: '别淘气',
template: 'index.html'
})
]
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<p>This is a template!</p>
</body>
</html>
执行webpack后,在dist中生成带hash的js文件,并且index.html自动引用生成的js文件,并且带的有我们在webpack.config.js配置的title,以及使用了根目录index.html的模板。
4, 以上只是打包js文件,通常开发还有css,images文件,甚至是less,scss文件,并且我们还想能够使用postcss来给我们自动添加浏览器私有前缀,并且我想用ES6来开发,这些需求如何来实现呢?
以下用less来配置:
npm i less-loader css-loader style-loader postcss-loader autoprefixer baberl-core babel-loader babel-preset-2015 -S
const path = require('path');
const htmlWebapckPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[hash].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: '/node_modules/',
loader: 'babel-loader',
options: {
presets: ['es2015']
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /\.less/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
}
]
},
plugins: [
new htmlWebapckPlugin({
title: '别淘气',
template: 'index.html'
})
]
}
另外,因为需要使用postcss,所以我们需要在根目录设置一个postcss.config.js文件。
module.exports = {
plugins: [
require('autoprefixer')({
browsers: ['last 5 versions']
})
]
}
这样,就可以满足之前我们所说的ES6+less+postcss。
5, 前端开发还经常有实时刷新的需求,在gulp中是比较容易实现的,直接用browser-sync就可以了。
在webpack中,我们需要webpack-der-server和raw-loader来结合使用达到我们的需求。
npm i webpack-dev-server raw-loader -S
因为,webpack-dev-server只能监听我们的js,css文件,less文件,不能监听html文件。所以需要raw-loader来监听我们的html文件。
在package.json文件中,配置脚本
"script": {
"hot": "webpack-dev-server --hot --inline"
}
这样,在命令行中输入: npm run hot
就可以开启服务器,打开localhost:8080
即可完成热更新,但是改变html文件,并不会实时刷新页面。
所以我们需要使用raw-loader加载器。
在webpack.config.js
中,配置html
{
"test": /\.html$/,
use: ['use-loader']
}
另外,在入口文件 main.js
中引入 index.html
即可。
再输入: npm run hot
试试吧。