webpack的mac版教程.
Posted 赖益文
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack的mac版教程.相关的知识，希望对你有一定的参考价值。
首先确保已经有了npm 和node.js
然后全局安装 webpack .要不然会出问题..就是在根目录下运行
npm install webpack --save-dev
全局安装好了之后就开始
在自己创建的一个文件夹下面运行:
mkdir webpack-demo && cd webpack-demonpm init -ynpm install --save-dev webpack
运行成功之后保证你的电脑已经安装了atom这个编辑器....
在命令行执行 atom ./
就会atom就会打开到当前的目录
mkdir src //这个用来存放源文件
mkdir dist //这个用来存放打出来的包
在src 的文件夹下面创建 index.js
npm install --save lodash
index.js 代码如下:
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerhtml = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
然后在根目录下面创建一个 webpack.config.js
里面去配置打包的入口和出口:
const path = require('path');
module.exports = {
entry: './src/script/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
要注意的是这里的webpack的版本是3.0+
然后再在dist 下面去创建一个
index.html.方便我们验证大包是否成功.
代码:
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script ></script>
</body>
</html>
接下来在命令行运行 :
./node_modules/.bin/webpack src/index.js dist/bundle.js
打包成功!!!!
如果闲麻烦还可以在 package.json里面加
"scripts": {
"build": "webpack"
},
然后执行 npm run build. 就会自动执行上面的一样的效果
或者直接 webpack 也是行的通 .但是要保证配置文件名是webpack.config.js.
比较简单,但是怕忘了.
以上是关于webpack的mac版教程.的主要内容，如果未能解决你的问题，请参考以下文章