webpack4 入门篇 新手指南
前言:
webpack4出了以后，一些插件变化很大，和之前的版本使用方式不一样，新手入坑，本篇将介绍如何从一开始配置webpack4的开发版本，对css，js进行编译打包合并生成md5，CSS中的图片处理，js自动注入html页，删除指定文件，热更新等等。
安装
// 全局安装
npm install -g webpack webpack-cli 新建目标文件夹并初始化
shift+鼠标右键 选择 在此处打开命令窗口
//创建文件夹
mkdir demo
//进入demo
cd demo
//初始化
npm init -y创建文件夹scripts并在scripts中新建index.js
// 写一个方法 并运行
function fn()
{
alert("webpack4.0")
};
fn();创建webpack.config.js 与scripts文件夹在同一目录
const path=require("path")
module.exports={
entry:{
index:"./scripts/index.js" //入口文件,若不配置webpack4将自动查找src目录下的index.js
},
output:{
filename:'[name].bundle.[hash].js', //输出文件名,[name]表示入口文件js名 [hash]会在后面生成随机hash值
path:path.join(__dirname,'dist') //输出文件路径
}
}执行webpack --mode development将会生成dist/index.bundle.xxx.js
创建src 文件夹 并新建index.html,并引入dist中的js文件
Document
你这么会在这儿?
打开浏览器将会看到设置的js 文件生效了
在src文件夹中分别创建a.css a.js c.js,更改index.js, 分别为:
a.css
body{
background-image: url('../scripts/Koala.jpg');
/* background-color: aquamarine; */
}a.js
import c from './c.js';
const data={
init(){
alert("I'm a little coder")
},
cinit(){
c.init()
}
}
export default data;c.js
const data={
init(){
document.write("Hello World")
}
}
export default data;index.js
import a from '../src/a.js'
import c from '../src/c.js'
function fn()
{
alert("webpack4.0")
a.init()
c.init()
};
fn();配置webpack.config.js 文件
const path=require("path")
module.exports={
entry:{
index:"./scripts/index.js" //入口文件,若不配置webpack4将自动查找src目录下的index.js
},
output:{
filename:'[name].bundle.[hash].js', //输出文件名,[name]表示入口文件js名 [hash]会在后面生成随机hash值
path:path.join(__dirname,'dist') //输出文件路径
},
module:{ // 处理对应模块
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader'] //处理css
}
]
}
}安装style-loader， css-loader
npm install style-loader css-loader --save-dev执行webpack --mode development将会看到一个带md5值得js文件，将他引入html中
CSS中的图片处理
安装url-loader, file-loader
npm install url-loader file-loader --save-dev配置webpack.config.js文件
const path=require("path")
module.exports={
entry:{
index:"./scripts/index.js" //入口文件,若不配置webpack4将自动查找src目录下的index.js
},
output:{
filename:'[name].bundle.[hash].js', //输出文件名,[name]表示入口文件js名 [hash]会在后面生成随机hash值
path:path.join(__dirname,'dist') //输出文件路径
},
module:{ // 处理对应模块
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader'] //处理css
},
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{
outputPath:'images/', //输出到images文件夹
limit:999999 //是把小于999999B的文件打成Base64的格式，写入JS
}
}]
}
]
}
}执行webpack --mode development将会看到dist中有一个images文件夹中有一张图片，打开index.html
js自动注入html文件
使用插件html-webpack-plugin，可以将生成的js自动引入html页面，不用手动添加
使用插件clean-webpack-plugin，删除指定文件，更多配置，查看clean-webpack-plugin
// 安装html-webpack-plugin
npm install html-webpack-plugin --save-dev
// 安装webpack webpack-cli
npm install webpack webpack-cli --save-dev
/ /安装clean-webpack-plugin
npm install clean-webpack-plugin --save-dev配置webpack.config.js文件
const path=require("path");
const HtmlWebpackPlugin=require('html-webpack-plugin')//引入html-webpack-plugin 可以将生成的js自动引入html页面
const CleanWebpackPlugin=require('clean-webpack-plugin')//引入删除指定文件组件
const webpack=require('webpack')
module.exports={
entry:{
index:"./scripts/index.js" //入口文件,若不配置webpack4将自动查找src目录下的index.js
},
output:{
filename:'[name].bundle.[hash].js', //输出文件名,[name]表示入口文件js名 [hash]会在后面生成随机hash值
path:path.join(__dirname,'dist') //输出文件路径
},
module:{ // 处理对应模块
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader'] //处理css
},
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{
outputPath:'images/', //输出到images文件夹
limit:999999 //是把小于999999B的文件打成Base64的格式，写入JS
}
}]
}
]
},
plugins:[ //对应的插件
new HtmlWebpackPlugin({//配置
filename:'index.html',//输出文件名
template:'./src/index.html', //以当前目录下的index.html文件为模板生成dist/index.html文件
}),
new CleanWebpackPlugin(), //webpack 4 +的默认配置 默认删除output dist下的文件
]
}每次执行webpack --mode development，可以看到dist目录被删除，又生成一个新的dist，之前的js文件已经被删除。
热更新，自动刷新
我们将用到webpack-dev-serve，webpack-dev-server就是一个基于Node.js和webpack的一个小型服务器，它有强大的自动刷新和热替换功能。
安装webpack-dev-serve
npm install webpack-dev-serve --save-dev配置webpack.config.js文件
const path=require("path");
const HtmlWebpackPlugin=require('html-webpack-plugin')//引入html-webpack-plugin 可以将生成的js自动引入html页面
const CleanWebpackPlugin=require('clean-webpack-plugin')//引入删除指定文件组件
const webpack=require('webpack')
module.exports={
entry:{
index:"./scripts/index.js" //入口文件,若不配置webpack4将自动查找src目录下的index.js
},
output:{
filename:'[name].bundle.[hash].js', //输出文件名,[name]表示入口文件js名 [hash]会在后面生成随机hash值
path:path.join(__dirname,'dist') //输出文件路径
},
module:{ // 处理对应模块
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader'] //处理css
},
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{
outputPath:'images/', //输出到images文件夹
limit:999999 //是把小于999999B的文件打成Base64的格式，写入JS
}
}]
}
]
},
plugins:[ //对应的插件
new HtmlWebpackPlugin({//配置
filename:'index.html',//输出文件名
template:'./src/index.html', //以当前目录下的index.html文件为模板生成dist/index.html文件
}),
new CleanWebpackPlugin(), //webpack 4 +的默认配置 默认删除output dist下的文件
],
devServer:{//配置此静态文件服务器，可以用来预览打包后项目
inline:true, //打包后加入一个websocket客户端
hot:true,//热加载
contentBase:path.resolve(__dirname,'dist'),//开发服务运行时的文件根目录
host:'localhost',//主机地址
port:9090,//端口号
compress:true//开发服务器是否启动gzip等压缩
}
}配置package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode development"
},执行npm run dev 访问 http://localhost:9090/
这样随意修改一个文件就会自动刷新