[初级]webpack4基本操作(一)

前言

这篇文章是本人根据gitchat上面的文章学习总结的,针对webpack4做了修改,各位看官可以直接移步原文,讲的更为详细一些
当然,如果只是想要快速入门并跳过一些webpack4的坑的话,可以看下这篇文章,20分钟足够

构建一个最基础的项目

图片描述

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就能看到了
图片描述

样式相关

我们在开发需求中需要样式，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的解析顺序是从右到左，和我们的阅读顺序相反。
图片描述

资源压缩

常用的有我们的uglify插件

npm i uglifyjs-webpack-plugin --save-dev

然后在我们的webpack里面引用：

const uglify = require("uglifyjs-webpack-plugin")

plugins: [
    new uglify()     
  ]

记得要加逗号哦，保存完了webpack一下
我们打开compiled.js，发现是这样的：
图片描述
这样可以减少我们代码的体积，当然，易读性就不存在了

[初级]webpack4基本操作(一)

前言

构建一个最基础的项目

热加载网页

异步的代码

样式相关

资源压缩

比那名居天子

引用和评论

[phaser3学习]使用phaser3做一款飞刀小游戏

开发自定义Taro插件解决跨平台难题

JS工程化集锦

macOS上HBuildX 开发 uni-app项目，运行调试时编辑保存文件不会自动编译更新页面

compression-webpack-plugin项目加载优化+nginx配置

你的项目刚刚启动？是时候考虑Globalization了！

ABAP system landscape和vue项目webpack构建的最佳实践