webpack3.x的entry,output,module解析

php中世界最好的语言
Lepaskan: 2018-03-10 13:56:07
asal
1970 orang telah melayarinya

这次给大家带来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;

1.png

 dist和src目录是自己创建的,dist用于存放编译后的文件,src用于存放源文件; node_modules是刚初始化生成的文件夹,里面各种模块,以后关于与项目构建有关的模块全部都是(也应该是)放在此目录下的;webpack.config.js是webpack配置项;package.json是node操作一些配置(其实也就是针对webpack);

  webpack.config.js配置(暂时这么多);

2.png

首先说一下这个配置用来干嘛的,其实就是告诉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>
Salin selepas log masuk

在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()); //放回元素给到页面;
Salin selepas log masuk

说些重要的; 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;);}
    完成之后,直接
Salin selepas log masuk

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

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

相关阅读:

VUE如何使用anmate.css

如何解决IE11的css Hack

Atas ialah kandungan terperinci webpack3.x的entry,output,module解析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!