webpack 简单构建起步

最新推荐文章于 2024-05-05 12:23:53 发布

zhiying_08

最新推荐文章于 2024-05-05 12:23:53 发布

阅读量183

点赞数

文章标签： webpack 构建起步

本文链接：https://blog.csdn.net/zhiying_08/article/details/80209084

版权

前提：确保node.js存在且是最新版本

第一步：创建一个空文件

mkdir webpack && cd webpack

第二步：初始化npm

npm init

第三步：本地安装webpack 和webpack-cli

npm install webpack --save-dev
npm webpack-cli --save-dev

第四步：创建目录结构和文件内容

dist/index.html

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

scr/index.js 注意：引入lodash之前应先安装lodash依赖 npm install --save lodash

import _ from 'lodash';

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

    return element;
  }

  document.body.appendChild(component());

第五步：使用配置文件执行构建在webpack下面创建一个webpack.json.js 内容如下

const path = require('path');
module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	}
}

第六步：在package.json中设置一个脚本实现快捷构建

最后通过命令行 npm run build 就会在浏览器中看到内容

zhiying_08

关注

0
点赞
踩
0

收藏

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

前提：确保node.js存在且是最新版本第一步：创建一个空文件mkdir webpack &amp;&amp; cd webpack第二步：初始化npm npm init第三步：本地安装webpack 和webpack-clinpm install webpack --save-devnpm webpack-cli --save-dev第四步：创建目录结构和文件内容dist/index.htm...
复制链接

扫一扫