webpack4 入门
webpack模块打包
npm init
touch index.html
touch index.js
touch header.js
touch content.js
touch sidebar.js
npm install webpack-cli --save-dev
npm install webpack --save
npx webpack index.js 源码地址 https://github.com/lilugirl/learn-webpack4/tree/master/3
用webpack编译index.js文件生成目录dist和main.js文件
使用CommonJS的模块引入方式打包源码 https://github.com/lilugirl/learn-webpack4/tree/master/4
常用命令
全局安装webpack npm install webpack webpack-cli -g
卸载全局webpack npm uninstall webpack webpack-cli -g
查看webpack版本 npm info webpack
查看当前目录下webpck的版本 npx webpack -v
webpack配置文件
在项目中创建webpack.config.js文件 ，内容如下
touch webpack.config.js
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'bundle')
}
}执行命令 npx webpack webpack会根据配置文件自动找到入口文件 按照配置进行打包
源码地址 https://github.com/lilugirl/learn-webpack4/tree/master/5
如果一个项目下有两个webpack配置文件，可以通过如下命令 指定具体的配置文件进行打包 npx webpack --config webpack.config.dev.js
如果将webpack配置项重的mode 设为 development 打包的文件生成的js将不会被压缩
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}使用file-loader打包图片文件
安装file-loader
npm install file-loader -Dwebpack.config.js配置如下
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
module: {
rules: [{
test: /\.jpg$/,
use: {
loader: 'file-loader'
}
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}index.js增加图片的引用
var avatar = require('./avatar.jpg');
console.log(avatar);执行打包命令
npm run bundle源码地址 https://github.com/lilugirl/learn-webpack4/tree/master/7
file-loader使用文档https://webpack.js.org/loaders/file-loader/
设置options配置项 规定打包文件的名称和输出路径
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/'
}
}
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}参考代码 https://github.com/lilugirl/learn-webpack4/tree/master/8
url-loader 打包
url-loader可以将图片打包成base64图片， 对于较小的图片这种方式比较合适， 对于大图使用file-loader比较合适。 对url-loader 增加limit配置 可以针对图片大小自动选择打包方案，如果图片不超过指定大小 就打包成base64图片，如果图片超过指定大小自动按照file-laoder打包。
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 10240
}
}
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}源码 https://github.com/lilugirl/learn-webpack4/tree/master/9
使用style-loader css-loader打包css文件
安装依赖
npm install style-loader css-laoder -Dcss-loader负责处理css文件之间的引用关系，style-loader负责将相关的样式挂载到引用bundle.js的页面上。
webpack.config.js配置如下
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 10240
}
}
}, {
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}src/index.js引入css的代码
import avatar from './avatar.jpg';
import './index.css';
var img = new Image();
img.src = avatar;
img.classList.add('avatar');
var root = document.getElementById('root');
root.append(img);源码 https://github.com/lilugirl/learn-webpack4/tree/master/10
使用sass-loader打包scss文件
loader的执行顺序是 从下到上 ，从右到左
安装依赖
npm install style-loader css-laoder -D
npm install sass-loader node-sass -Dwebpack.config.js的配置
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 10240
}
}
}, {
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}src/index.js
import avatar from './avatar.jpg';
import './index.scss';
var img = new Image();
img.src = avatar;
img.classList.add('avatar');
var root = document.getElementById('root');
root.append(img);示例源码 https://github.com/lilugirl/learn-webpack4/tree/master/11
使用postcss-loader提供自动补齐css前缀功能
安装依赖
npm i postcss-loader -D
npm i -D autoprefixer创建postcss.config.js
module.exports = {
plugins: [require('autoprefixer')]
}webpack.config.js设置如下
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 10240
}
}
}, {
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
'postcss-loader'
]
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}package.json文件中增加browerlist
"browserslist": [
"iOS >= 6",
"Android >= 4",
"IE >= 9"
]