webpack起步

最新推荐文章于 2022-04-23 11:44:53 发布

CodeLines3

最新推荐文章于 2022-04-23 11:44:53 发布

阅读量170

点赞数

分类专栏：前端 webpack 文章标签： webpack

本文链接：https://blog.csdn.net/Sun_Shydeo/article/details/89363092

版权

前端同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

webpack

2 篇文章 0 订阅

订阅专栏

1、webpack安装

1.1、安装最新NodeJS

1.2、创建webpack-demo目录(cmd操作)

mkdir webpack-demo

cd webpack-demo

1.3、初始化 package.json

npm init -y

1.4、安装 webpack 和 webpack-cli

npm install webpack webpack-cli --save-dev

2、创建一个bundle文件

2.1、创建src文件夹，以及src/index.js，引入lodash

mkdir src

cd src

type NUL > index.js

import _ from 'lodash'

function component(){
	var element = document.createElement('div');
	element.innerHTML = _.join(['hello', 'webpack'], '');
	return element;
}

document.body.appendChild(component());

npm install --save lodash

2.2、创建dist文件夹，以及dist/index.html

mkdir dist

cd dist

type NUL > index.html

import _ from 'lodash'

function component(){
	var element = document.createElement('div');
	element.innerHTML = _.join(['hello', 'webpack'], '');
	return element;
}

document.body.appendChild(component());

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>webpack</title>
</head>
<body>
	<script src="main.js"></script>
</body>
</html>

3、输出main.js，webpack-demo下执行

npx webpack

dist文件夹下生成一个 main.js

4、访问dist/index.html

模块

大多数项目需要复杂的配置，webpack支持配置文件，可以创建一个取代以上使用CLI选项方式的配置文件

在webpack-demo目录下创建webpack.config.js，具体配置如下：

指定loader规则（loader rules）
插件 plugins
解析选项 resolve options等

const path = require('path');

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname, 'dist')  //__dirname 双下划线
    }
}

通过webpack.config,js再次执行构建

npx webpack --config webpack.config.js

在 index.html 引入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>webpack</title>
</head>
<body>
	<script src="bundle.js"></script>
</body>
</html>

npm 脚本

CLI运行本地webpack不是很方便，可以设置快捷方式，在 package.json中添加一个 npm脚本

"build" : "webpack"

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

接下来可以使用 npm run build 命令替代 npx 命令

以上就是基本webpack构建过程

文件夹目录如下

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

CodeLines3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack起步

1、webpack安装1.1、安装最新NodeJS1.2、创建webpack-demo目录(cmd操作)mkdir webpack-democd webpack-demo1.3、初始化 package.jsonnpm init -y 1.4、安装 webpack 和 webpack-clinpm install webpack webpack-cli --sa...
复制链接

扫一扫