首页 >web前端 >js教程 >webpack3.x的entry,output,module解析

webpack3.x的entry,output,module解析

php中世界最好的语言原创: 2018-03-10 13:56:072008浏览

这次给大家带来webpack3.x的entry,output,module解析，使用webpack3.x的entry,output,module的注意事项有哪些，下面就是实战案例，一起来看一下。

　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 &#39;lodash&#39;;     
import &#39;../css/style1.css&#39;;
import icon1 from &#39;../img/aa00.jpg&#39;;
import printMe from &#39;./print.js&#39;;
function component() {
    var div = document.createElement(&#39;div&#39;);
    var btn = document.createElement(&#39;button&#39;);
    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    div.innerHTML = _.join([&#39;Hello&#39;, &#39;webpack&#39;], &#39; &#39;);
    var img = new Image();
    img.src = icon1;
    div.appendChild(img);
    btn.innerHTML = &#39;Click me and check the console!&#39;;
    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(&#39;print.js...&#39;);}
    完成之后,直接

在cmd 命令 webpack一下;出现了图片和样式; 检查一下dist目录下会出现打包后的js以及图片;上面示例了webpack如何打包css,图片等一些简单操作;

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！