[初级]webpack4基本操作(一)
前言
这篇文章是本人根据gitchat上面的文章学习总结的,针对webpack4做了修改,各位看官可以直接移步原文,讲的更为详细一些
当然,如果只是想要快速入门并跳过一些webpack4的坑的话,可以看下这篇文章,20分钟足够
构建一个最基础的项目
![[初级]webpack4基本操作(一)](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAibHJjq33YB-MrjFA1wsd-c88qpWPgi4CGbV5his4KbO27oTVZO6s1l_VENyq_bZia4.jpg "[初级]webpack4基本操作(一)")
app.js: 入口文件,webpack会加载其中所有的依赖(require,import的内容) module.js: 模块文件,在app.js中间使用 compiled.js: 编译过的项目文件,我们在index.html中引用
首先,我们需要一个页面index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="dist/compiled.js"></script> </head> <body> </body> </html>
我们创建一个app.js
import log from "./module.js"
document.write("app was loaded!")
log()以及module.js
export default function(){
document.write("module has been loaded!")
}我们还需要在目录下建一个dist文件夹,用来存放我们编译后的文件
写好以后,我们还需要写webpack配置文件,新建webpack.config.js:
const path = require("path")
module.exports= {
entry: "./app.js",
output:{
path: path.join(__dirname,"dist"),
filename: "compiled.js"
},
mode: "development"
}entry: 入口文件,可以有多个,webpack会根据每个入口文件来打包 output: 出口文件,path为文件路径 mode: webpack4新增的选项,production/development两种模式适应不同场景
这里有mode详细的解释
写好了之后,我们全局安装一下webpack
npm i -g webpack
然后在命令行运行
webpack
打开我们的index.html,就可以看到网页了
热加载网页
当我们开发的时候也希望保存文件就可以看到效果吧?
使用一个热门框架webpack-dev-server可以做到这一点:
npm i -g webpack-dev-server
安装完以后,我们还需要在webpack.config.js中修改一下:
const path = require("path")
module.exports= {
entry: "./app.js",
output:{
path: path.join(__dirname,"dist"),
filename: "compiled.js"
},
devServer:{
port: 3000,
publicPath: "/dist/"
},
mode: "development"
}port: 端口名 publicPath: 需要加载外部资源的文件路径,我们这里先注释一下
现在运行webpack-dev-server,打开localhost:3000,就可以看到我们的页面了
修改app.js 或者 module.js,保存以后可以实时看到结果.
异步的代码
我们也可以修改我们的代码,让webpack支持异步的代码:
webpack.config.js:
const path = require("path")
module.exports= {
entry: "./app.js",
output:{
path: path.join(__dirname,"dist"),
publicPath: "./dist/",
filename: "compiled.js"
},
devServer:{
port: 3000,
publicPath: "/dist/"
},
mode: "development"
}这里我们添加了output中的oublicPath,这里是输出文件的路径，如果没有的话使用异步代码会报错
app.js:
import log from "./module.js"
import('./async.js').then(module=>{
module.log()
}).catch(err=>{throw new Error("An error happend!:"+err)})
document.write("app was loaded!")
log()我们使用类似promise语法的方式来处理异步请求
async.js:
export const log = function(){
console.log("I'm async")
}如果运行了webpack-dev-server,那么你应该看到结果了，如果没有的话运行webpack就能看到了![[初级]webpack4基本操作(一)](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAiYexsoBmjihnd9NxwVn-5dx1bo3KbSrUEuq5IhgkTG8zxOwwIcrYXI055Q96VECJCc.jpg "[初级]webpack4基本操作(一)")
样式相关
我们在开发需求中需要样式，webpack使用动态生成的方式将我们的样式内嵌到页面文件当中
新建index.css
body{
padding: 200px;
text-align: center;
color: white;
background-color: #666
}然后在app.js中导入:
import './index.css'
这时，我们的样式就导入进去了。但是webpack并没有内置任何的载入器，我们需要手动下载和配置(其实强烈推荐yarn)
npm i css-loader --save-dev npm i style-loader --save-dev
我们再在webpack.config.js中加上:
module:{
rules: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
}这是webpack4的写法，所有的模组都装在这里面，增加易读性
其中loader的解析顺序是从右到左，和我们的阅读顺序相反。![[初级]webpack4基本操作(一)](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAia3TNINvjXX2FVLkI4fGBdr8k2ncPaYUA_kPgp4fOuMX1HM2afT6nEyjaRb-S2qs9Q.jpg "[初级]webpack4基本操作(一)")
资源压缩
常用的有我们的uglify插件
npm i uglifyjs-webpack-plugin --save-dev
然后在我们的webpack里面引用：
const uglify = require("uglifyjs-webpack-plugin")
plugins: [
new uglify()
]记得要加逗号哦，保存完了webpack一下
我们打开compiled.js，发现是这样的：![[初级]webpack4基本操作(一)](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAibRxgblvadp0ADk1uglbojh8DvwuCiTAdetjzRFkXhLbExY8upnkeQHLVieuIpB--4.jpg "[初级]webpack4基本操作(一)")
这样可以减少我们代码的体积，当然，易读性就不存在了