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

时间 2019-12-06

标签初级 webpack4 webpack 基本繁體版

原文原文链接

前言

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

构建一个最基础的项目

app.js: 入口文件,webpack会加载其中全部的依赖(require,import的内容)
module.js: 模块文件,在app.js中间使用
compiled.js: 编译过的项目文件,咱们在index.html中引用

首先,咱们须要一个页面index.html: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.jswebpack

import log from "./module.js"
document.write("app was loaded!")
log()

以及module.jsgit

export default  function(){
  document.write("module has been loaded!")
}

咱们还须要在目录下建一个dist文件夹,用来存放咱们编译后的文件

写好之后,咱们还须要写webpack配置文件,新建webpack.config.js:github

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详细的解释
写好了以后,咱们全局安装一下webpackweb

npm i -g webpack

而后在命令行运行npm

webpack

打开咱们的index.html,就能够看到网页了promise

热加载网页

当咱们开发的时候也但愿保存文件就能够看到效果吧?
使用一个热门框架webpack-dev-server能够作到这一点:app

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，发现是这样的：
这样能够减小咱们代码的体积，固然，易读性就不存在了