我将在这篇文章着重介绍最基本的配置示例。介绍完之后会以项目的形式展示其他使用的源码。
1,基本示例:
新建一个项目
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
给项目中添加index.html和 src/index.js文件。此时目录:
webpack-demo
|- package.json
+ |- /src
+ |- index.js
+ |- /dist
|-index.html
src/index.js
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
dist/index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
此时,index.js依赖了lodash库,我们把依赖加到packge.json
npm install --save lodash
此时,在命令行输入:
npx webpack
会发现在dist目录下出现一个main.js 打开index.html 会显示 Hello webpack
npx命令:npx介绍:方应杭
npx 会自动查找当前依赖包中的可执行文件,如果找不到,就会去 PATH 里找。如果依然找不到,就会帮你安装!
因为webpack入口文件默认是/src/index.js 出口文件是/dist/main.js 所以即使没有写webpack.config.js配置文件。一样通过webpack可以打包好文件。
2,使用配置文件webpack.config.js
配置内容:
var path = require('path')
module.exports = {
entry:'./src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname,'dist')
}
}
再在packge.json 中加入:
build": "npx webpack --config webpack.config.js"
此时,安装依赖,运行npm run build 后,会得到和demo1一样的结果。 源代码:demo2
3,loader使用的例子。css 和image载入。
加载css分为两种情况,一个是style这种内联的,一种是单独的css文件。因此loader也开发了两种:style-loader和css.loader
加载image通过file-loader。
首先在命令行安装这几个依赖模块。
npm install --save-dev style-loader css-loader file-loader
然后在配置文件中,添加这几个loader
module: {
rules:[
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test:/\.(gif|png|jpg)$/,
use: ['file-loader']
}
]
}
配置完成,现在就可以在index.js中使用这几个模块
import _ from 'lodash';
import './index.css';
import picture from './hsq.gif';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('colorRed');
var image = new Image();
image.src = picture;
element.appendChild(image);
return element;
}
document.body.appendChild(component());
任务完成。此时运行 npm run build 就可以看到css文件的加载效果,和图片的加载效果。
项目源码: demo3
4. 插件的使用举例。
HtmlWebpackPlugin
自动生成一个html文件,自动生成HTML文件有两个明显的好处:1,方便,不必自己写。2,html依赖的脚本的文件名如果改动,那么不必再去手动改动html文件的依赖。
webpack.config.js
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Output Management'
+ })
+ ],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
安装相关插件模块,在配置文件中完成相关配置后,既可以不写html文件而自动生成了。
源码地址:demo4
总结:
截至目前,使用webpack的4个核心概念,已经可以确定的解决各种基本问题了。但,还是给人一种说不上的感觉,为啥和人家vue-cli差那么多,热更新也没。
所以,这个问题是下一篇要讲的东西。