webpack的基本使用

目标

为了平常web前端项目中可以使用ES6语法，使用webpack搭建转换环境。

安装webpack

// 按照提示设置项目，也可以一直回车采用默认设置，生成一个package.json文件
npm init 
// 在项目中安装webpack，将依赖写入package.json文件中
npm install webpack --save-dev

tips: –save将插件写入生产环境依赖，–save-dev将插件写入开发环境依赖

安装babel

babel是一套组件，用于将js文件中的ES6语法转为ES5语法，从而在浏览器中执行。
参考：http://www.ruanyifeng.com/blog/2016/01/babel.html

1.安装babel-loader和babel-core

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

2.安装babel-preset-es2015和babel-preset-es2015-loose

npm install --save-dev babel-preset-es2015 babel-preset-es2015-loose

参考：为什么安装babel-preset-es2015-loose

安装copy-webpack-plugin

npm install --save-dev copy-webpack-plugin 

copy-webpack-plugink可以在创建的一个实例中多次复制文件或者文件夹到不同的路径。

new CopyWebpackPlugin(
    [{ from: './index.html', to: path.resolve(output_path,'..')}, { from: 'libs' , to: 'libs'}
    {
        copyUnmodified: true
    }
)

参考：https://github.com/webpack-contrib/copy-webpack-plugin

webpack.config.js

上面完成了插件的安装后，webpack的配置主要写于webpack.config.js中，这个文件需要自己手动创建。

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

//通过node中的path模块获得路径
const ROOT_PATH = path.resolve(__dirname);

module.exports = {
    // devtool: 'eval-source-map',
    //页面入口文件配置
    entry: {
        'js': path.normalize(ROOT_PATH + '/index.js')
    },
    //入口文件输出配置
    output: {
        path: ROOT_PATH + '/production',
        filename: 'js/bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['babel-preset-es2015-loose']
                }
            }
        }]
    },
    resolve: {
        extensions: ['.js']
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),

        new CopyWebpackPlugin(
            [{
                from: ROOT_PATH + '/app/index.html',
                to: ROOT_PATH + '/production'
            }, {
                from: ROOT_PATH + '/app/css',
                to: ROOT_PATH + '/production/css'
            }, {
                from: ROOT_PATH + '/app/images',
                to: ROOT_PATH + '/production/images'
            },{
                from: ROOT_PATH + '/app/libs',
                to: ROOT_PATH + '/production/libs'
            }], {
                copyUnmodified: true
            }
        )
    ]
}

tips：为了将各个js打包成一个文件bundle.js，从入口文件index.js开始，各个js文件的关系，需要使用import引入。.html文件中的路径需要使用打包后的路径。

项目目录：

app文件夹中目录：

production文件夹中目录：

在webpack.config.js文件所在目录，打开命令行，使用webpack -w可以实时监视改变文件，使用webpack -p可以打包一次。

其他参考

https://segmentfault.com/a/1190000004172052