webpack作为如今的热门工具跟前端三大框架密不可分,是有学一下的必要的;
先决条件: 有node环境,有npm工具;(新版的node自带了npm工具);
下面开始一步一步的做吧:
1.先选择一个目录作为你的项目存放的位置;
cmd 工具进入到项目目录(假设我的是D:\webpack-demo4); 然后使用nmp安装webpack: npm install webpack --save-dev("不推荐全局安装");
完了之后使用 npm init 你的项目目录,后面都是一些描述性的内容,如何想省略 直接npm init -y;
dist和src目录是自己创建的,dist用于存放编译后的文件,src用于存放源文件; node_modules是刚初始化生成的文件夹,里面各种模块,以后关于与项目构建有关的模块全部都是(也应该是)放在此目录下的;webpack.config.js是webpack配置项;package.json是node操作一些配置(其实也就是针对webpack);
webpack.config.js配置(暂时这么多);
首先说一下这个配置用来干嘛的,其实就是告诉webpack怎么打包;一 一说明一下;
entry:是入口文件;意思是从哪个js文件开始的;说一下这个相对路径,这个是你cmd命令行进入那个目录开始计算的;比如我的是:
[ webpack-demo4] -->下面有dist目录,有src目录; 那么我运行配置的时候 应该到webpack-demo4下面 然后 webpack --config webpack-config.js(或直接webpack);
output为设置的输出:以上的设置结果是,webpack打包后会在dist目录下的js文件夹生成app.bundle.js和print.bundle.js name其实就是 entry中的键;
module中存放了两个加载文件和css的加载器;
当然在运行webpack之前要 npm install style-loader css loader --save -dev 和npm install file-loader --save -dev;安装的时候要cd到webpak-demo4目录;
现在我在dist目录下有一个自己写的index002.html:如下;
<html>
<head>
<title>Output Management(输出)</title>
<meta charset=utf-8>
</head>
<body>
</body>
</html>
<script src="./js/app.bundle.js"></script>在src目录有俩个js文件;
index.js
import _ from 'lodash';
import '../css/style1.css';
import icon1 from '../img/aa00.jpg';
import printMe from './print.js';
function component() {
var div = document.createElement('div');
var btn = document.createElement('button');
// Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
div.innerHTML = _.join(['Hello', 'webpack'], ' ');
var img = new Image();
img.src = icon1;
div.appendChild(img);
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe;
div.appendChild(btn);
return div;
}
document.body.appendChild(component()); //放回元素给到页面;说些重要的; import '../css/style1.css'; 是在相对于index.js的上级目录(src)下的css下有个style1.css;比如我写了 body的背景时蓝色;同样在img下存放了一张图片;
再分别引入了图片和print.js;
print.js:
export default function printMe() { console.log('print.js...');}
完成之后,直接在cmd 命令 webpack一下;出现了图片和样式; 检查一下dist目录下会出现打包后的js以及图片;上面示例了webpack如何打包css,图片等一些简单操作;
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
以上就是webpack3.x的entry,output,module解析的详细内容，更多请关注php中文网其它相关文章！
