优点较为突出:打包 html, css, js, png/jpg
打包方法:2种
方法1: 同一级目录下打包(较为简单基础)
方法2:命令行打包(推荐)
配置 webpack.config.js
打包命令:$ webpack
具体可以参照 github 原作者文档(适合入门):
https://github.com/manlili/webpack_learn
注意事项(可能出现的问题):
- cnpm 安装 sass-loader 依赖包丢失,需要把其余的补上或者直接 npm
- html 里面读取配置的title,module 里面没有 html-loader 才可生效
- 打包图片和字体,file-loader 和 url-loader 是有区别的。
file-loader: 相对于当前执行 webpack 命令的目录的相对路径
url-loader: 当前打包地址的路径下(比较好用)
附 webpack.config.js 配置:
附 js 打包 webpack.config.js
//babel-loader 编译 ES6 to ES5 语法, 供浏览器解析
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: __dirname + '/components/js/index',
output: {
path: path.resolve(__dirname, './'),
filename: 'main.js'
},
module: {
rules: [{
test: /\.js$/,
include: path.resolve(__dirname, './components/js'),
use: {
loader: 'babel-loader'
}
}]
}
}
直接执行命令(webpack)即可打包成功。
—-end