基础文件配置
在安装webpack之前你需要先安装Node.js
- node -v可以查看当前安装的node版本
- 要想使用webpack指令，先用npm install webpack webpack-cli --save-dev指令进行全局安装
- 当前项目安装webpack npm install webpack webpack-cli --save-dev（yarn add webpack webpack-cli -D），webpack从4开始，webpack本身和cli就分离开了
- webpack的三种使用方式：
1.npx webpack
2.node_modules/.bin/webpack
3.在package.json的scripts添加"build":"node_modules/.bin/webpack"，然后执行npm run build命令
1.创建一个目录，并且切换到目录下面
mkdir webpack-demo && cd webpack-demo
2.npm初始化并本地安装webpack
下面这个指令会在本地生成一个package.json的文件
npm init -y
然后执行npm install webpack --save-dev安装webpack开发依赖。
3.在webpack-demo目录下创建对应的目录和文件
src目录用来存放源文件mkdir src && cd src
创建一个个入口文件index.jstouch index.js
创建3个模块touch moudel1.js module2.js module3.js
4.index.js文件内容
import module_1 from './module1'
import module_2 from './module2'
import module_3 from './module3'
module_1()
module_2()
module_3()
5.module1.js文件内容
export default function module_1() {
console.log("这是module_1模块")
}
6.module2.js文件内容
export default function module_2() {
console.log("这是module_2模块")
}
7.module3.js文件内容
export default function module_3() {
console.log("这是module_3模块")
}
8.现在，需要返回到项目的根目录，也就是webpack-demo目录下，新建一个配置文件
touch webpack.config.js
9.在webpack.config.js中写配置内容
在项目的根目录下创建一个dist文件，作为配置的输出路径，app.js是webpack打包运行后自动生成的
const path = require('path')
// 导入处理路径的模块
module.exports = {
// 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
entry: './src/index.js', // 项目入口文件
output: { // 配置输出选项
path: path.resolve(__dirname, 'dist'), // 配置输出的路径，当前的位置为__dirname，拼接上dist，形成一个绝对路径，然后再拼上下面的filename，形成项目的输出文件
filename: 'my-first-webpack-bundle.js' //配置输出的文件名
}
}
10.找到根目录下package.json文件，在script后的对象中，添加内容
"dev": "./node_modules/.bin/webpack"
11.npm run dev
mode设置
当我们在项目中最初使用npm run build的时候，命令行工具中会警告我们没有设置mode，所以会自动使用production模式，所以我们可以在webpack的配置文件webpack.config.js中设置modemode:'production'或者是development，正常情况下，development打包出来的文件会大很多。
mode的使用场景：
比如我们在某个js文件中设置以下代码
if (process.env.NODE_ENV === 'development') {
console.log('base is localhost')
}else{
console.log('base is imoccom')
}
根据webpack的配置文件中mode的设置，会打包出来上面的js语句中对应的代码
使用html-webpack-plugin插件配置启动页面
这个插件就是帮我们自动生成html文件并且自动引入打包好的js文件
- 运行
npm i html-webpack-plugin --save安装到开发依赖 - 修改
webpack.config.js配置文件如下：
// 导入处理路径的模块
var path = require('path');
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
plugins:[ // 添加plugins节点配置插件
new htmlWebpackPlugin({
//在这个插件内部，可以指定模版和自定义生成的文件名
template:'src/index.html',
//加了template选项，就会在这个模板的基础上把打包好的js文件加入到这里面中
filename:'main.html'//自动生成的HTML文件的名称
})
]
}
有了上面两个配置后，这个插件帮助生成一个main.html，并且是基于template:'src/index.html'生成的
配置webapck支持babel
yarn add babel-loader @babel/core @babel/preset-env @babel/plgun-transform-runtime -D
yarn add @babel/runtime -S
@babel/runtime的安装只是为了支持本地开发的运行环境，所以使用-S进行安装就可以了。
接下来是修改配置文件.babelrc
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
接下来去webpack.config.js文件的module的rules中添加规则
module:{
rules:[
{
test: '/\.js$/',
loader: 'babel-loader'
}
]
}
这样的话，再次打包运行，会发现刚才安装的babel应用成功了
接下来掩饰安装一个插件，用来复制静态文件进制定的位置
yarn add clean-webpack-plugin copy-webpack-plugin -D
在webpack.config.js文件中添加如下代码：
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { CopyWebpackPlugin } = require('copy-webpack-plugin')
在plugins中去new一下
new CleanWebpackPlugin()
new CopyWebpackPlugin([{
from:'path.join(__dirname,'assets')',
to:'assets'
}])
然后npm run build就可以自动当前项目的assets文件夹直接放到dist中去了
使用webpack-dev-server插件实现实时打包构建
webpack自带了webpack --watch指令，如果
webpack-dev-server插件提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。
1.安装webpack-dev-server
npm install webpack-dev-server --save-dev
增加package.json配置文件如下：
"start": "webpack-dev-server",
在终端运行命令：
npm start
这个命令是利用了webpack-dev-server将项目打包到内存中，而npm run dev是将项目打包到dist文件夹中，项目上线时直接把dist中的文件部署到服务器中就可以，打包到内存中的好处是可以实现实时更新。
命令启动后，就可通过浏览器的对应接口对项目进行预览。
2.让webpack自动给我们打开服务器地址
在webpack.config.js中添加配置
devServer:{
open: true
}
其中open:true 表示自动打开浏览器
3.修改服务器端口
在webpack.config.js中添加配置项目
devServer:{
open: true,
port: 8090
}
其中port后面给了个自定义端口
4.设置默认访问目录，如果不设置访问目录，则系统会默认访问项目根目录
devServer:{
open: true,
port: 8090,
contentBase: './dist'
}
零配置使用webpack4.x
1.安装webpack
webpack的安装方式可以分为全局安装和局部安装，全局安装需要加 -g
npm install webpack -g
不过这种方式并不推荐，我们需要直接安装在项目本地, 注意：webpack4.x版本安装需要安装webpack-cli
进入到自己的项目目录，我这里项目目录为webpack-demo, 进入到目录，执行命令，npm init 初始化项目
webpack-cli@3.1.2
npm install webpack webpack-cli -D
2.简单打包实例
在项目目录下新建src目录，在src目录下分别建立index.js 和 module_a.js文件
index.js里的内容
let a = require("./module_a")
console.log(a)
module_a.js里的内容
module.exports = "hello world！！！"
3.运行打包
npx webpack
//可以添加上生产模式
npx webpack --mode development
npx是npm里内置的一个包执行器，需要npm 版本5.2.0以上支持，因此，请查看版本号是否支持
用npx都不用在webpack.config.js添加dev配置了
webpack4中mode分三种：“-- production(生产环境)”,"--development(开发环境)","--none(不使用前两个默认的配置)"，上面的每一种模式都对应着一种配置。
在实际开发过程中可以设置mode来在我们自定义配置的基础上 加上 mode提供给我们的配置。
打包后在dist目录下会生成一个main.js的文件
使用webpack自定义配置
在项目目录下新建 webpack.config.js, webpack是基于node的 遵循commonjs规范，在配置文件中需要使用module.exports导出内容，配置文件主要包括以下几个模块
module.exports = {
//入口配置
entry: '',
//出口配置
output: '',
//模块配置
module: {},
//插件配置
plugins: {},
//模式配置，开发模式还是生产模式
mode:'',
//开发服务器配置
devServer: {},
//解析配置
resolve: {}
}
简单配置：
const path = require("path")
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.css/,
use: ["style-loader", "css-loader"]
},
{
test: /\.(jpg|png|gif|bmp)/,
use: [
loader: "url-loader",
options: {
limit: 10240
}
]
}
]
}
}
