Webpack构建前端项目

最新推荐文章于 2024-05-06 19:08:09 发布

aide2955

最新推荐文章于 2024-05-06 19:08:09 发布

阅读量125

点赞数

文章标签： webpack 前端 json ViewUI

原文链接：http://www.cnblogs.com/coder163/p/8782261.html

版权

前言

公司据说要搞前后端分离，趁这两天项目完成的差不多，抓紧时间学习一下前端知识
现在流行前端项目工程化，那么第一个问题就是如何创建工程(项目)，第一次玩webpack

通过 NPM 创建项目

# 创建项目
npm init -y

-y 在这里是表示快速新建。使用 npm init 来初始化，终端会一步一步提示输入 name、version、description 等项目 meta 信息，通过使用 flag -y 跳过所有的 prompt，一路到底完成默认值的初始化。
完成后 NPM 会自动在目录中创建 package.json 文件,内容如下

{
  "name": "vue-demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node_modules/.bin/webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Webpack 基础配置

安装 Webpack

# 安装 Webpack
npm install webpack --save-dev

--save 在是让 NPM 将这个依赖写入到 package.json 中
-dev 的意思则是，这不只是一个项目依赖，而是一个开发中需要的依赖。
淘宝的NPM镜像
安装完成后,在package.json中增加如下内容:

  "devDependencies": {
    "webpack": "^4.5.0"
  }

最基本的文件结构

在index.js中添加测试代码

alert('Hello World!');

Webpack 中最基本的打包

Webpack 提供了很多选项供我们在开发的时候灵活调用满足自己的需求，最基本的是 entry，output, 前者指定了文件的入口，而后者指定 Webpack 在编译了入口文件后的打包文件（bundle）放在哪里，比如入口是 src/ 目录下的 app.js 文件，而打包完成的文件，希望可以放到 dist/ 目录下，并且命名为 bundle.js，那我们在终端中就可以运行：

#  最基本的打包方式
#Webpack4.5之前
./node_modules/.bin/webpack src/js/index.js build/bundle.js
# Webpack4.5之后认为后面的文件是需要打包的文件,所以命令改为如下,同时会生成一个dist/main.js压缩之后的文件
./node_modules/.bin/webpack src/js/index.js

为什么不直接使用 webpack 命令：

# Webpack 最基本的打包命令
webpack src/js/index.js

npm install webpack --g 全局安装就可以每次都轻松使用 webpack 直接作为命令，而不需要输入上面那一长串。但是！在绝大多数情况下都不要进行全局安装，很可能在不通的项目里会需要的不同版本的 Webapck，全局唯一的安装版本很可能会造成很多未知的问题。而且之后会提到配置 NPM Script，通过那里，执行 webpack 命令也会很方便，也更加符合最佳实践。

检查npm全局安装的包

# 检查 npm 全局已经安装的
npm list -g --depth=0
# 如果已经安装了，比如说 webpack，卸载：
npm uninstall -g webpack

通过配置文件进行打包

我们在实际项目中不这么干，而是通过配置文件对 Webpack 进行配置。在项目的根目录创建相关配置文件 Webpack.config.js 文件，如下：

# 创建 webpack.config.js 作为 webpack 的配置文件
touch webpack.config.js

文件内容如下:

let Webpack = require('webpack');
let path = require('path');
module.exports = {
    mode: 'development',
    entry: './src/js/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'index.js'
    }
};

该文件的主要作用是告诉webpack我们项目的入口文件、出口文件和运行环境
如果没有该配置文件,那么之前所运行的命令都会有一个警告,至少我在使用4.5.0这个版本是这样
我们需要在配置文件中指明我们使用的模式(或者说环境)即mode,它支持的取值"production"生产模式,"development":开发模式,官方说明

编写HTML

index.html中的代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Webpack Vue</title>
</head>

<body>
    <script src="build/index.js"></script>
</body>
</html>