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