手记

快速入门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 src="./assets/main.bundle.js"></script>
</body>
</html>

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

生成main.bundle.js文件,chunk名称为main,也是webpack默认生成的chunk

28人推荐
随时随地看视频
慕课网APP

热门评论

loader: 'style!css' //貌似不能使用这种语法了
loader: 'style-loader!css-loader' //应该是这种了


loader: 'style!css' //貌似不能使用这种语法了
loader: 'style-loader!css-loader' //应该是这种了


报错:

ERROR in ./app.js
Module not found: Error: Cannot resolve module 'style' in D:\wamp\www\vue\basic
 @ ./app.js 1:0-20


查看全部评论