webpack入门指南
1.简介
Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。今天跟着我们源码时代php培训学科讲师来学学Webpack的安装以及使用！
2.Webpack的安装
安装Webpack之前必须确保安装了Node.js.
在当下项目中安装
npm install webpack --save-dev
npm install webpack@<version> --save-dev
在当前项目中安装的话, 只能够在项目根目录下/node_modules/.bin/webpack运行webpack命令.
全局安装
npm install webpack -g
全局安装的话,可以在任何项目目录中运行webpack命令
3.项目中可能遇到的问题
通过webpack构建一个项目.
1.创建项目文件夹并且安装本地webpack
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack
2.在项目根目录下创建app/index.js
function component () {
var element = document.createElement('div');
/* lodash is required for the next line to work */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());
3.在项目根目录下创建index.html
<html>
<head>
<title>webpack 2 demo</title>
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<script src="app/index.js"></script>
</body>
</html>
在index.js运行之前需要依赖ladash.
现在应用程序存在三个问题:
如果index依赖的lodash不存在,就无法使用到lodash中提供的函数.
如果index.js和lodash引入的顺序不对也发生错误.
如果index.js没有使用到lodash,那么加载lodash就没有意义.
4.Webpack解决问题
1.使用npm安装lodash
npm install --save lodash
2.修改app/index.js
import _ from 'lodash';
function component () {
...
3.修改index.html
<html>
<head>
<title>webpack 2 demo</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
4.项目根目录下运行webpack命令(使用全局命令)
webpack app/index.js dist/bundle.js
5.使用webpack的一个配置文件
在项目根目录下创建一个webpack.config.js
var path = require('path');
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
entry: 入口文件
output.filename: 输出的文件名
output.path: 输出的文件目录
本文由源码时代www.itsource.cn|nkk分享发布。转载请注明出处！