webpack4 快速上手

一、初识webpack

什么是webpack?官网介绍是 module bundler,  JavaScript 的模块打包器,大概意思就是,能够将一堆关系错综复杂的 .js, .css,  .sass 等文件,打包成几个静态的文件,在 html 里面直接插入实用,webpack中包含了gulp自动打包工具、包含了babel转es5压缩等...

另外,Webpack4正式发布以后。只要使用npm install webpack命令,默认安装的就是版本4。webpack3和webpack4的搭建区别还是挺大的,丢哥在这里提醒大家如果对版本的变更不是很了解的情况下,就会被网上各种Webpack的教程弄混淆,特别是一些通过视频学习的同学看的是几年前的教程,使用的是Webpack3,这样就会导致各种无法预知的错误。

  • npm相关命令了解
初始化新项目
npm init
全局安装依赖包package,不属于具体哪个项目
npm install --global package
安装运行时依赖包PACKAGE,会打包至最终生成文件
npm install --save package
安装开发时依赖包package,不会出现在生产文件中(正式运营环境)。webpack就属于开发时用来打包文件,在运行时就不需要它了。
npm install --save-dev package
执行命令,具体命令配置在package.json中
npm run command
同时以上安装依赖命令也有简写模式
npm i -g package
npm i -S package
npm i -D package

二、安装webpack

首先要安装 Node.js, Node.js 自带了软件包管理器 npm,Webpack 需要 Node.js v0.6 以上支持,建议使用最新版 Node.js,全局安装webpack

$ npm install webpack -g    #全局安装webpack

此时 Webpack 已经安装到了全局环境下,可以通过命令行 webpack -h 试试。

通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。

$ mkdir demo    # 创建一个demo目录

$ cd demo

$ npm init		# 初始化一个项目,生成package.json

# 安装webpack与webpack-cli
$ npm install --save-dev webpack
$ npm install --save-dev webpack-cli

同时检查,package.json文件中"devDependencies"本地配置中会新增webpack和webpack-cli的配置文件,如果有,那么成功了。

二、打包实现

mkdir src    # 创建src目录

  • 在src/index.html中写入:
<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="../dist/bundle.js"></script>
</body>
</html>
  • 在main.js中写入:
// main.js

document.write('It works for main.js')
  • 在package.json中配置scripts【dist文件夹和bundle.js会自动生成】:
"scripts": {
   "build": "webpack ./src/main.js -o ./dist/bundle.js --mode development"
  },
  • 最后在终端中使用如下命令:
npm run build  # 使用webpack进行打包了

三、webpack.config.js配置

这里具体的部分不做详细的解释,大家可以参考下面的代码,同时结合webpack官方文档进行学习,相信进过此番学习,大家可以掌握webpack的基本使用方法。

// 这是webpack的配置文件,当 npm run build 会自动找webpack.config.js
// 这个配置未见时运行在node环境下的,这个配置文件书写方法是node.js语法

const path = require("path");

module.exports = {
        //入口文件
        entry: path.join(__dirname, "./src/main.js"),
        //出口
        output: {
                //配置出口文件得目录
                path: path.join(__dirname, './dist'),
                filename: 'bundle.js'
        },
        mode: "development",
}        

四、常用插件

package.js文件如下:这样给大家一个参考,哪些是需要本地安装(–save-dev)的,哪些是需要依赖生产环境安装的(–save)。各种类型文件的安装的具体指令都可以参考webpack官方文档,文档中都写得比较清楚。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",    # 当项目需要上线的时候,使用npm run build可以生成生产环境下的相关文件。
    "dev": "webpack-dev-server"    # 在项目开发过程中使用npm run dev 可以实现自动更新页面的效果,但是仅供项目开发过程中使用,因为无法生成生产环境下的相关文件。
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^3.1.0",
    "file-loader": "^4.1.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "style-loader": "^0.23.1",
    "url-loader": "^2.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.5.1",
    "webpack-dev-server": "^3.7.2"
  },

您的支持是对我最大的鼓励!

发表于: 作者:吕倡
博主经历空降兵部队8年军旅生涯,退伍后到北京IT兄弟连学习软件编程开发,工作不到一年后IT进入兄弟会,一晃在IT行业混迹了5、6年的时间。。。从一名小白也进入到了IT管理者的位置。博客,是博主学习知识分享以及私人笔记(未发布的博客)留存的地方,方便随时观看。
我的站点 Github 新浪微博 Email联系我