先搭建环境
- 初始化项目
npm init -y
- 安装webpack模块, 如果你使用 webpack 4+ 版本，你还需要安装 CLI
cnpm i -S webpack webpack-cli
js打包
- 在根目录创建webpack.config.js
const path = require('path');
module.exports = {
mode: 'development', //开发模式下打包的bundle不压缩
// 要打程序的入口文件
entry: './src/index.js',
// 输出配置
output: {
filename: 'bundle.js', //输出文件名
path: path.resolve(__dirname, 'dist') //输出文件夹
}
}
- 在src下创建要打包的js文件
src/component.js
function Component(){
let root = document.getElementById('root');
let sidebar = document.createElement('div');
sidebar.innerText = 'div组件';
root.append(sidebar);
}
module.exports = Component;
src/index.js
let Component = require('./component');
new Component();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
- 执行npx webpack命令
npx webpack
Hash: 7e954982e269e38bd42f
Version: webpack 4.39.2
Time: 110ms
Built at: 2019-08-16 3:08:51 PM
Asset Size Chunks Chunk Names
bundle.js 1010 bytes 0 [emitted] main
Entrypoint main = bundle.js
[0] ./src/index.js 77 bytes {0} [built]
[1] ./src/math.js 65 bytes {0} [built]
这个时候会在dist文件夹下会生成一个打包压缩后的文件bundle.js
用浏览器打开index.html
index.html
打包图片
webpack默认只支持打包js, 如果想打包js之外的文件, 我们就需要使用loader
打包图片我们使用file-loader或url-loader
- 安装file-loader
cnpm install --save-dev file-loader
- 修改webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js'
},
module: {
rules: [{
test: /\.(png|jpg|gif)$/, //碰到后缀是png、jpg、gif的文件就会使用file-loader进行打包
use: {
loader: 'file-loader'
}
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
- 新建src/index.js, 并拷贝一张图片到src/avatar.jpg
scr/index.js
import avatar from './avatar.jpg';
let img = new Image();
img.src = avatar;
let root = document.getElementById('root');
root.append(img);
- 新建dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
- 执行 npx webpack
npx webpack
Hash: 0b413571972db93b6790
Version: webpack 4.39.2
Time: 150ms
Built at: 2019-08-16 3:53:48 PM
Asset Size Chunks Chunk Names
be79a32d4444c57efb22a820edfef634.jpg 20.3 KiB [emitted]
bundle.js 4.64 KiB main [emitted] main
Entrypoint main = bundle.js
[./src/avatar.jpg] 82 bytes {main} [built]
[./src/index.js] 141 bytes {main} [built]
在dist文件夹下生成两个文件, bundle.js和be79a32d4444c57efb22a820edfef634.jpg图片文件
打开index.html
index.html
url-loader和file-loader功能基本一致, 感兴趣的话可以去官网查看文档了解
打包CSS
打包css我们使用style-loader和css-loader
- 安装模块
cnpm i --save-dev css-loader style-loader
- webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js'
},
module: {
rules: [{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
- 创建index.css样式文件
.avatar{
width: 100px;
height: 100px;
}
- 创建index.js文件
import avatar from './avatar.jpg';
import './index.css';
let img = new Image();
img.src = avatar;
img.classList.add('avatar');
let root = document.getElementById('root');
root.append(img);
执行打包命令 npx webpack
npx webpack
Hash: 22d0c5b96ff94ee6e1b4
Version: webpack 4.39.2
Time: 389ms
Built at: 2019-08-16 4:08:48 PM
Asset Size Chunks Chunk Names
be79a32d4444c57efb22a820edfef634.jpg 20.3 KiB [emitted]
bundle.js 17.5 KiB main [emitted] main
Entrypoint main = bundle.js
[./node_modules/_css-loader@3.2.0@css-loader/dist/cjs.js!./src/index.css] 212 bytes {main} [built]
[./src/avatar.jpg] 82 bytes {main} [built]
[./src/index.css] 441 bytes {main} [built]
[./src/index.js] 194 bytes {main} [built]
+ 2 hidden modules
这个时候打开dist\index.html文件, 这个时候的图片大小根据样式改变
index.html
打包scss
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js'
},
module: {
rules: [
{
test: /\.(png|jpg|gif)$/, //碰到后缀是png、jpg、gif的文件就会使用file-loader进行打包
use: {
loader: 'file-loader'
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.scss$/,
use: [
'style-loader', //将 JS 字符串生成为 style 节点
'css-loader', //将 CSS 转化成 CommonJS 模块
'sass-loader', //将 Sass 编译成 CSS
'postcss-loader' //添加浏览器前缀
]
}
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
sass自己照着上面的写吧, 今天就写到这了
