首页手记快速入门webpack（2）- 安装与基本配置

快速入门webpack（2）- 安装与基本配置

标签：

前端工具

2. webpack安装

全局安装(供全局调用：如webpack --config webpack.config.js)

npm install -g webpack

项目安装

npm install webpack

// 处理类似如下调用
import webpack from "webpack";
var webpack = require("webpack");

建议安装淘宝的npm镜像，这样下载npm包会快上很多，具体做法：

// 方式一
npm install xx --registry=https://registry.npm.taobao.org/

// 方式二:安装淘宝提供的npm工具
npm install -g cnpm
cnpm install xx

// 方式三
// 在用户主目录下，找到.npmrc文件，加上下面这段配置
registry=https://registry.npm.taobao.org/

3. webpack的基本配置

创建配置文件(webpack.config.js，执行webpack命令的时候，默认会执行这个文件)

module.export = {
    entry : 'app.js',
    output : {
        path : 'assets/',
        filename : '[name].bundle.js'
    },
    module : {
        loaders : [
            // 使用babel-loader解析js或者jsx模块
            { test : /\.js\.jsx$/, loader : 'babel' },
            // 使用css-loader解析css模块
            { test : /\.css$/, loader : 'style!css' },
            // or another way
            { test : /\.css$/, loader : ['style', 'css'] }
        ]
    }
};

说明一： webpack.config.js默认输出一个webpack的配置文件，与CLI方式调用相同，只是更加简便

说明二：执行webpack命令即可以运行配置，先决条件，全局安装webpack，项目安装各模块loader

说明三： entry对应需要打包的入口js文件，output对应输出的目录以及文件名，module中的loaders对应解析各个模块时需要的加载器

一个简单的例子

basic/app.js

require('./app.css');
document.getElementById('container').textContent = 'APP';

basic/app.css

* {
    margin: 0;
    padding: 0;
}
#container {
    margin: 50px auto;
    width: 50%;
    height: 200px;
    line-height: 200px;
    border-radius: 5px;
    box-shadow: 0 0 .5em #000;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
}

basic/webpack.config.js

/**
 * webpack打包配置文件
 */

module.exports = {
    // 如果你有多个入口js,需要打包在一个文件中,那么你可以这么写 
    // entry : ['./app1.js', './app2.js']
    entry : './app.js',
    output : {
        path : './assets/',
        filename : '[name].bundle.js'
    },
    module : {
        loaders : [
            { test : /\.js$/, loader : 'babel' },
            { test : /\.css$/, loader : 'style!css' }
        ]
    }
};

basic/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>basic webpack</title>
</head>
<body>
    <div id="container"></div>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/main.bundle.js"></script>
</body>
</html>

在basic文件夹执行webpack，打包信息如下