最基本的使用方式
1.全局安装 npm i webpack -g 全局使用webpack命令
2.安装到项目依赖 有时候我们的项目要依赖webpack，可以运行npm i webpack --save-dev
示例——隔行变色
1.新键变成目录
2.引入jquery npm init -y npm i jquery -s
3.html结构
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script type="text/javascript" src='./main.js'></script>
</body>
</html>4.入口js文件
代码语言：javascript复制//导入jquery
import $ from 'jquery'
$(function(){
$('li:odd').css('backgroundColor','blue')
$('li:even').cs('backgroundColor','gray')
})main.js使用了es6的语法 import,必须利用webpack编译才能正常运行在浏览器上
5.新建webpack.config.js 这是webpack的配置文件，在里面设置打包入口，出口等信息
//webpack.config.js
const path = require('path')
module.exports = {
//入口文件
entry:path.join(__dirname,'./src/main.js'),
output:{
//输出文件相关配置
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
}
}在命令工具输入webpack完成打包编译
打包后的文件在/dist/bundle.js因此我们的index.html 文件要引入打包后的bundle.js
<script type="text/javascript" src='../dist/bundle.js'></script>成功运行到浏览器
sourcemap
主要有以下配置
代码语言：javascript复制 devtool:'source-map',//增加映射文件，方便调试代码
devtool:'eval-source-map',//不会产生单独文件 可以立即调试
devtool:'cheap-module-source-map',//不会产生列表 但是会产生一个单独文件，保留用于调试
devtool:'cheap-module-eval-source-map',//不会产生文件 集成在打包后的文件中 不会产生列、watch
文件自动监控打包
代码语言：javascript复制...
watch:true,
watchOptions:{
//监控选项
poll:1000,//1秒检测一次
aggregateTimeout:500,//防抖 500毫秒内输入的东西只打包一次
ignored:/node_modules///不需要监控
},
output:{
...运行webpack命令后自动监控打包
resolve
设置模块如何被解析
代码语言：javascript复制resolve:{
modules:[path.resolve('node_modules'),path.resolve('test')]//设置第三方模板的查找范围
extensions:['.vue','.'js','.json']//引入模块省略扩展名时规定以vue->js->json的文件格式查找
alias:{
bootstrap:'bootstrap/dist/css/bootstrap.css'
/*页面直接引入bootstrap，而不会自动找到bootstrap.js*/
},
mainFields:['style','main']先找style目录在找main
}环境变量
在开发中我们要根据不同的环境进行不同的操作 如下
代码语言：javascript复制if(DEV==='dev'){
url=’http://localhost‘
}else{
url='http://www.zihanzy.com'
}
console.lo(url)那我们怎么区分当前环境呢？ 通过webpack plugin 首先引入 npm i cross-env 在package.json进行配置,手动设置环境变量
...
"scripts": {
"build": "cross-env NODE=production webpack --config webpack.config.js",
"dev": "cross-env NODE=production webpack-dev-server --config webpack.config.js"
},
...在webpack配置文件
代码语言：javascript复制const idDev = process.env.NODE_ENV==='development'
let webpack = require('webpack')
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'home.html',
}),
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:isDev?'"dev"':'"pro"'
}
}),
]if(process.env.NODE_ENV==='dev'){
url=’http://localhost‘
}else{
url='http://www.zihanzy.com'
}
console.lo(url)//'http://www.zihanzy.com'当然只区分环境变量是不够的，我们一般有三套配置，分别为基础配置、开发配置、生产配置然后根据环境变量运行不同的配置文件
引入模块合并配置文件 cnpm i webpack-merge -D webpack.base.js
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require ('clean-webpack-plugin')
let webpack = require('webpack');
module.exports={
entry:{
home:'./src/index.js',
},
module:{
rules:[
{
test:/.js$/,
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
}
}
}
]
},
output:{
//[name]=home/other
filename:'main.js',
path:path.resolve(__dirname,'dist')
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'home.html',
}),
new webpack.DefinePlugin({
DEV:JSON.stringify('pro')
})
]
}webpack.pro.js
代码语言：javascript复制let { merge } = require('webpack-merge');
let base = require('./webpack.base.js');
module.exports =merge(base,{
mode:'production'
})webpack.dev.js
代码语言：javascript复制let { merge } = require('webpack-merge');
let base = require('./webpack.base.js');
module.exports = merge(base,{
mode:'development'
})
