webpack+babel+less构建简单热重载项目架构

一、开始

npm init
npm install

先进行整个项目的初始化。
我们先来构建一个基于 webpack 打包的简单项目。

npm install --save-dev webpack
// --save打包后还需要的依赖
// --save-dev开发环境需要的依赖

然后在根目录新建一个 webpack.config.js 文件写入一些简单配置

1
2
3
4
5
6
7
8
9
10
var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: __dirname + '/src/index.js',
    output: {
        path: __dirname + '/pack',
        filename: 'pack.js'
    }
}

这样一个最简单的打包项目就做好了，入口文件为 src 里面 index.js，打包输出在 pack 文件夹命名为 pack.js

二、使用 babel

首先当然是引入依赖

 npm install --save-dev babel-core babel-loader babel-preset-2015

修改 webpack.config.js 为

1
2
3
4
5
6
7
module: {
    loaders: [{
        test: /\.js$/,
        exclude: /(node_modules)/,
        loaders: 'babel-loader'
    }]
}

这样边可以引用 babel 转码了

三、引入 less

npm install --save-dev style-loader css-loader less less-loader autoprefixer-loader

修改 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: __dirname + '/src/index.js',
    output: {
        path: __dirname + '/pack',
        filename: 'pack.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /(node_modules)/,
            loaders: 'babel-loader'
        },{
            test: /\.css$/,
            loaders: 'style-loader!css-loader!autoprefixer-loader'
        },{
            test: /\.less$/,
            loaders: 'style-loader!css-loader!autoprefixer-loader!less-loader'
        }]
    }
}

然后引入 less 的方式为在

import '../*.less'

四、热加载

用到 webpack 的一个插件 webpack-dev-server
安装完这个依赖后在控制台输入

webpack-dev-server --inline --hot

便可以热加载啦