webpack 入门指南

webpack

第一步:创建webpack-demo目录,并且切到这个目录下面,随后初始化生成package.json且安装webpack

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack

第二步:详细操作步骤
(1)安装lodash

npm install --save lodash

(2)随后创建 app 子目录下创建一个 index.js 文件。

//引入lodash
import _ from 'lodash';

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

(3)在app目录下创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack 2 demo</title>
</head>
<body>
    <script type="text/javascript" src='dist/bundle.js'></script>
</body>
</html>

(4) 在app目录下创建webpack.config.js

var path = require('path');

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

(5) package.jsont中添加配置

"scripts": {
        "build":"webpack"
 },

第三步:运行

npm run build

第四步:用浏览器打开index.html查看效果

效果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容