webpack前端打包工具

1.安装webpack命令环境
cnpm install webpack -g
使用cnpm代替默认的npm好处你懂的~
2.使用npm命令自动生成package.json文件
npm init
3.安装本地webpack
cnpm install webpack -D
4.小例子
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-demo</title>
    <script src="bundle.js"></script>
</head>
<body>
<div id="box">

</div>
</body>
</html>

bundle.js是webapp默认打包后的js文件，在html里引用这个script就行了，其他真正用到的js文件会打包到这个文件里
entry.js

var a = require('./a');
//require('style-loader!css-loader!./index.css');
//import modA from './b';
require('./index.css');
window.onload = function () {
    var box = document.getElementById('box');
    box.innerHTML='<h3>hello webpack</h3> '+a;
    //box.innerHTML='<h3>hello webpack</h3> '+(modA.a+modA.b);
}

在项目目录下cmd运行命令webpack entry.js bundle.js
访问index.html，出现hello webpack说明webpack打包entry.js成功
5.css加载器loader
上面4的例子只是打包了一个js文件，下面尝试加载css文件，需要用到
首先使用npm安装一下style-loader和css-loader
cnpm install style-loader css-loader -D
上面entry.js加入require('style-loader!css-loader!./index.css');
index.css

body{
    background: salmon;
    color:#fff;
    font-size: 40px;
}

访问index.html，出现hello webpack且背景颜色等样式设置成功
除了css外，webpack会自动解决依赖
定义一个a.js内容如下

module.exports = 'yilianxinyuan';

在entry.js里加入var a = require('./a');即可引入a.js获得里面的内容
6.webpack.config.js
显然上面在entry.js直接使用require js或者css，然后每次都要这么长的命令webpack entry.js bundle.js是不方便的
所以要通过配置文件webpack.config.js来简化这些操作

module.exports={
    entry:'./entry.js',
    output:{
        filename:'bundle.js'
    },
    devServer:{
        port:8088,
        inline:true
    },
    module:{
        loaders:[
            {test:/\.css$/,loader:'style-loader!css-loader'},
            {test:/\.js$/,loader:'babel-loader',exclude:/node_modules/}
        ]
    },
    resolve:{
        "extensions":['.js','.css']
    }
};

devServer和resolve可以先不看
entry----定义webpack的入口
output---定义webpack的出口
module---loaders定义js、css加载器loader

现在直接使用webpack就可以实现将entry.js打包成bundle.js
webpack -p 打包并压缩
webpack -w 监听，文件有改动自动编译
webpack -d 开启调试模式生成source maps,在浏览器中能看到打包之前的文件

7.webpack配置babel转化
配置babel预设
执行命令touch .babelrc
在.babelrc文件里写入

{
  "presets":['es2015']
}

并在webpack.config.js里module增加
{test:/\.js$/,loader:'babel-loader',exclude:/node_modules/}
这样就可以放心大胆的写es6了
新建b.js

export default {
    a:1,
    b:2
}

在entry.js里获得b.js数据

import modA from './b';
box.innerHTML='<h3>hello webpack</h3> '+(modA.a+modA.b);

8.webpack-dev-server
这是一个基于webpack小型服务器，它的一个非常重要的作用就是定义端口号和代码改变自动刷新浏览器
首先安装命令环境cnpm install webpack-dev-server -g
下面就可以使用webpack-dev-server命令打包文件啦
webpack-dev-server --port 8088 设置端口号
webpack-dev-server --inline 改完代码后自动刷新浏览器
webpack-dev-server --hot 改完代码后自动刷新浏览器
当然每次执行命令都加这些参数显然也是不人道的，所以可以在配置文件里进行配置

devServer:{
        port:8088,
        inline:true
    },

访问http://localhost:8080得到index.html页面结果
9.把运行命令放到package.json

"scripts": {
    "dev": "webpack-dev-server"
  },

这样在命令行输入npm run dev效果等同运行webpack-dev-server

webpack前端打包工具

猜你喜欢