1.起步
创建webpack_demo文件夹（名称必须是webpack_demo）
cmd (打开命令行)
cd webpack_demo (进入webpack_demo)
npm install --save-dev webpack (下载webpack)
npm init (初始化webpack,没有特殊要求，一路默认，会自动生成package.json文件)
npm install --save-dev webpack_cli (会自动生成package-lock.json文件)
创建webpack_demo文件夹（名称必须是webpack_demo）
cmd (打开命令行)
cd webpack_demo (进入webpack_demo)
npm install --save-dev webpack (下载webpack)
npm init (初始化webpack,没有特殊要求，一路默认，会自动生成package.json文件)
npm install --save-dev webpack_cli (会自动生成package-lock.json文件)2.配置
创建文件/文件夹（结构如下）
webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
+ |- index.html
+ |- /src
+ |- index.js/*------------------------------index.html---------------------------*/
<!doctype html>
<html>
<head>
<title>起步</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>/*---------------------------src/index.js----------------------------*/
function component() {
var element = document.createElement('div');
// Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
/*-------------------------webpack.config.js-------------------------*/
const path = require('path');
module.exports = {
entry: './src/index.js', //打包入口文件
output: {
filename: 'bundle.js', //打包出口文件
path: path.resolve(__dirname, 'dist') //出口路径
}
};
3.打包
npm install --save lodash 安装依赖
npx webpack –config webpack.config.js 打包
620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
