webpack是干什么的网上一堆，就不赘述了。现在从零开始学习webpack;
- 初始化项目
git init // git 初始化
npm init // 创建package.json.
image.png
- 安装webpack webpack-cli
cnpm i webpack webpack-cli --save-dev
image.png
- 现在就可以使用webpack了，我们先来创建一个src目录，在下面创建一个index.js；index.js内容console一段话
console.log('哈哈哈')
image.png
-
命令行运行webpack
image.png
- 然后就会发现在生成了一个dist目录，下面有webpack打包生成的main.js.
image.png
-
我们在根目录下创建一个html文件，并引入main.js。打开网页，打开控制台，可以看到输出了"哈哈哈";
image.png
image.png
-
我们试一下能不能require其他js。在src下创建一个a.js。里面
console.log('我是 a.js'); 在index.js中 require('./a.js');
image.png
-
重新命令webpack打包文件，然后打开index.html
image.png
- 可以看到控制台输出了a.js中的内容。证明把多个js打包了。
-
当然如果我们不想用默认打包方式可以创建webpack.config.js；在里面配置我们的个性化打包方式。
image.png
-
webpack.config.js中的一些简单的配置；
const path = require('path');
module.exports = {
mode: 'production', //开发模式 development 生产模式production
entry: './src/index.js', // 入口
output:{
filename: "index.[hash:8].js", // 打包后的文件名，带上8位数的hash值
path: path.resolve(__dirname, 'build') // 打包后的绝对路径 path自带模块相对路径转换绝对路径
}
}
image.png
-
配置好webpack.config.js后，需要在package.json.中scripts中配置
启动命令
image.png
-
然后我们在命令行输入
npm run build
可以看到在根目录打包了build文件夹，下面有一个index.18abb081.js的文件，在html中引入这个新的js。
image.png
-
打开网页，控制台一样输出了 ‘哈哈哈’ ‘我是 a.js’，说明配置没有问题。
- 当然我们也可以重命名webpack.config.js。比如我们加webpack.config.test.js
-
把webpack.config.js中的内容复制过来，输出文件夹改个名字试一下
image.png
-
package.json 中的build内容修改为 webpack --config webpack.config.test.js
image.png
-
可以看到打包成功，并且生成了预期的buildtest的文件夹，引入当前js到index.html中，控制台也正常打印了结果。
- 好了把webpack.config.test.js文件删除，package.json也回去。现在打包后的文件我是用vscode插件启动的index.html。当然webpack肯定有自己启动服务的插件。
webpack-dev-server
- 命令行安装
webpack-dev-server
image.png
-
package.json中配置启动命令。
image.png
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"serve": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1"
}
}
-
现在我们在命令行运行
npm run serve，打开页面localhost:8080;控制台依然打印成功了。
image.png
-
当然我们可以配置 webpack.config.js中devServer
const path = require('path');
module.exports = {
mode: 'production', //开发模式 development 生产模式production
entry: './src/index.js', // 入口
output:{
filename: "index.[hash:8].js", // 打包后的文件名，带上8位数的hash值
path: path.resolve(__dirname, 'build') // 打包后的绝对路径 path自带模块相对路径转换绝对路径
},
devServer:{
port: 1234, // 端口号 不能6666-6669 ,安全限制在chrome中不能成功
progress: true, // 加上进度条
contentBase: './', //静态服务的目录。默认当前根目录，如果index.html在src下，这里就要改为./src
open: true, //自动打开页面
compress: true, //压缩
}
}
- 这时会自动打开页面。控制台也打印成功
网友评论