webpack3.x 学习笔记01 (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 '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,图片等一些简单操作;