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'})
    ]
}