webpack学习

全局安装安装webapck

npm i webpack -g

现在我们就可以全局的使用webpack命令了

webpack中基础的命令：

webpack enter.js output.js --watch

这个命令是将enter.js打包成output.js，然后html只需要引用该文件就可以了
看如下entry.js,这是简单的js代码。

// 这边是处理js逻辑
let people = require('./people')
let $ = require('jquery')

$.each(people, function(key, value){
    $('body').append('<h1>'+people[key].name+'</h1>')
})

那么如何来打包css文件呢，只需要将css也引入到enter.js即可，这样跟文件index.html还是只需要引用output.js即可
引入css需要几个插件；css-loader， style-loader（由于是静态文件，需要编译）

require('!style-loader!css-loader!./style.css')

以上为简单的打包；如果需要复杂的工程的话，webpack推荐使用配置文件来配置
webpack的配置文件必须是webpack.config.js
上面的配置只需要这样写

module.exports = {
    // 入口文件
    entry: './app.js',
    // 出口文件
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    // 需要依赖的插件或装载器
    mudule: {
        loader: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
}

以下是一个简易的开发目录

针对该目录配置文件如下
ps: 需要将es6转码需要安装 babel-core,babel-loader,babel-env,babel-preset-es2015

module.exports = {
    // 入口文件
    entry: '.src/js/app.js',
    // 出口文件
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    // 需要依赖的插件或装载器
    mudule: {
        loader: [
            // css加载
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            // es6转码为es2015
            {
                test: /\.js/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']  // ps这一块也可以写在.babelrc文件下
                },
                exclude: /node_modules/
            }
        ]
    },
    // 自动生成html文件，会引入js
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './index.html'})
    ]
}