初識webpack

初次與webpack結緣是一個偶然的機會，此時webpack已經是3+了，通過學習webpack的相關配置，對其有了一些基本的了解，不在是提到webpack，只知道是打包工具的層面了。想必各位對webpack也有一定的了解，這裡就不對webpack做過多的解釋了，直接分享webpack的基本配置

/** *created by AimeeLi in 2017-08-17 **/ const webpack = require(webpack); const path = require("path") const OpenBrowserPlugin = require(open-browser-webpack-plugin);//webpack啟動成功後自動打開瀏覽器 module.exports = { devServer: { historyApiFallback: true, hot: true, inline: false, contentBase: ./src, port: 3033 }, // 配置入口文件 entry: [ path.resolve(__dirname, src/index.js) ], // 配置打包輸出 output: { path: path.resolve(__dirname, build), publicPath: /, filename: ./bundle.js }, resolve: {//resolve配置用來影響webpack模塊解析規則。解析規則也可以稱之為檢索，索引規則。配置索引規則能夠縮短webpack的解析時間，提升打包速度。 extensions: [*,.js, .jsx] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new OpenBrowserPlugin({url: http://localhost:3033}) ] }

此篇文章是webpack最基本的配置，此時已經可以啟動項目，並對項目中的文件，進行打包，後續會繼續更新，加一些webpack的插件，使其功能更加完善

推薦閱讀：