一、全局安装
npm install webpack -g
npm install webpack-cli -g
二、创建webpack项目
新建项目文件夹，例如myProject
进入文件夹后启动命令行，当前项目下本地安装webpack
npm i webpack -S
初始化项目，自动生成相应的package.json配置
npm init -y
项目文件中新建三个文件夹src,dist,config
三、简单打包测试
webpack 4.x默认的入口文件是src文件下的index.js
所以在src中新建一个index.js
可以直接简单测试下webpack打包
webpack
完成后dist文件出现main.js
webpack有两种打包环境：
开发环境 development
生产环境 production
打包时需要配置一下的相应的环境，否则会出现黄色警告
webpack --mode=developement
//或者
wepback --mode=production
四、config设置
package.json
主要负责一些依赖项，命令的定义之类的，和开发环境配置有关
在config文件下新建webpack.dev.js
主要负责一些压缩，打包，入口，输出文件方面的事，和业务有关
（先修改之前的src下的index.js为main.js）
webpack.dev.js编辑内容如下
const path=require('path')
module.exports={
//webpack4 独有的mode,production/development
mode:'development',
//入口
entry:{
main:'./src/main.js'
},
//出口
output:{
//path.resolve把路径变为绝对路径
path:path.resolve(__dirname,'../dist')
}
}
在package.json中的scripts里添加一行
"scripts": {
"build": "webpack --config=config/webpack.dev.js"
},
需要安装webpack-cli
npm i webpack-cli -S
测试打包
npm run build
如果多个入口js文件,entry加入相应的内容,output设置filename:'[name].js'
const path=require('path')
module.exports={
//webpack4 独有的mode,production/development
mode:'development',
//入口
entry:{
main:'./src/main.js',
index:'./src/index.js',
/*
下面写法，是将两个js打包合并成一个js
all:['./src/main.js','./src/index.js']
*/
},
//出口
output:{
//path.resolve把路径变为绝对路径
path:path.resolve(__dirname,'../dist'),
filename:'[name].[hash].js'
}
}
五、webpack 服务server
先全局安装
npm i webpack-dev-server -g
在package.json中设置
"scripts": {
"server":"webpack-dev-server --config=config/webpack.dev.js"
},
在webpack.dev.js中加入
devServer:{
//基本的目录结构
contentBase:path.resolve(__dirname,'../dist'),
//ip地址
host:'localhost',
//服务器是否开始压缩
compress:true,
//端口号
port:1234
}
启动npm run server
六、打包css、html文件
1. 打包css文件
需要安装css解析器
//style-loader则是将打包后的css代码以<style>标签形式添加到页面头部
npm i style-loader -S
//css-loader只是用于加载css文件（并没有添加到页面）
npm i css-loader -S
在webpack.dev.js中添加module
//模块，配置css,js,图片等的处理
module:{
rules:[{
test:/\.css$/,
use:[{
loader:'style-loader'
},{
loader:'css-loader'
}]
}]
},
在src下新建css文件夹，新建index.css，在main.js中导入index.css
import css from './css/index.css'
重新运行npm run server
这样的css是在head头部通过<style></style>标签引入的
可以通过插件extract-text-webpack-plugin提取css，生成单独的css文件
npm i extract-text-webpack-plugin@next -S
在webpack.dev.js中加入
const ExtractTextWebpackPlugin=require('extract-text-webpack-plugin')
module:{
rules:[{
test: /\.css$/,
use:ExtractTextWebpackPlugin.extract({
fallback:'style-loader',
use:['css-loader']
})
}]
},
plugins:[
new ExtractTextWebpackPlugin("/css/[name].[hash].css")
],
npm run build 单独的css文件后在dist下的css文件夹下
2. 打包html文件
就是自动生成dist中的index.html并引入js文件
将之前dist中的index.html移动到src下，并删除引入的js
首先安装插件html-webpack-plugin
npm i html-webpack-plugin -S
在webpack.dev.js中添加plugins
const htmlWebpackPlugin=require('html-webpack-plugin')
//插件
plugins:[
new htmlWebpackPlugin({
title:'我是首页',
template:'./src/index.html',
})
],
npm run server查看效果
