下面看下webpack打包js文件的实现代码

const path = require('path')const webpack = require('webpack')const htmlWebpackPlugin = require('html-webpack-plugin')// 每次打包之前，自动删除文件夹const cleanWebpackPlugin = require('clean-webpack-plugin')// 分离 css 到独立的文件中const ExtractTextPlugin = require("extract-text-webpack-plugin");// 压缩 css 资源文件const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')module.exports = {// 入口entry: {// 项目代码入口app: path.join(__dirname, './src/js/main.js'),// 第三方包入口vendor: ['vue', 'vue-router', 'vue-resource', 'vuex', 'moment', 'mint-ui', 'vue-preview']},// 出口output: {path: path.join(__dirname, './dist'),// 设置公共路径publicPath: '/',// 此处的name由 entry 中的属性名决定// chunk 表示一个代码块（webpack模块化分析代码后的结构）filename: 'js/[name].[chunkhash].js',// ------添加 chunkFilename, 指定输出js文件的名称------chunkFilename: 'js/[name].[chunkhash].js',},// 配置loader，处理不同的静态资源module: {rules: [{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },{test: /\.css$/,// 抽离和压缩cssuse: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader"})},{test: /\.(sass|scss)$/,// 抽离和压缩 scssuse: ExtractTextPlugin.extract({fallback: "style-loader",use: ['css-loader', 'sass-loader']})},{test: /\.(png|jpg|jpeg|gif|bmp|webp)$/, use: {loader: 'url-loader',options: {limit: 6518,// name: 'images/imgs-[hash:7].[ext]'// [name] 使用图片的名称作为最终生成的文件名称// [ext] 使用图片的默认后缀// name: '[name].[ext]'// images/ 表示图片生成后存放的路径name: 'images/[hash:10].[ext]'}}},{// 参考上面图片的配置，进行配置即可test: /\.(ttf|woff|woff2|svg|eot)$/,use: {loader: 'url-loader',options: {limit: 2048,name: 'fonts/[hash:10].[ext]'}}},{ test: /\.vue$/, use: 'vue-loader' },]},// source-map 定位错误的// devtool: 'cheap-module-source-map',// 配置 htmlWebpackPluginplugins: [new htmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),filename: 'index.html',// 压缩HTMLminify: {// 移除空白collapseWhitespace: true,// 移除注释removeComments: true,// 移除属性中的双引号removeAttributeQuotes: true}}),// 自动删除dist目录// 参数：表示要删除文件的路径，可以是多个new cleanWebpackPlugin(['./dist']),// 分离第三方包（公共包文件）new webpack.optimize.CommonsChunkPlugin({// 第三方包入口名称，对应 entry 中的 vendor 属性// 将 entry 中指定的 ['vue', 'vue-router', 'vue-resource'] 打包到名为 vendor 的js文件中name: 'vendor',}),// 压缩js代码new webpack.optimize.UglifyJsPlugin({sourceMap: true,// 压缩compress: {// 移除警告warnings: false}}),// 指定环境，设置为生产环境// 开发期间我们使用vue的为压缩版本，项目上下了，只需要将环境修改为// 生产环境，那么，vue就会自动变为 压缩版本new webpack.DefinePlugin({'process.env': {'NODE_ENV': JSON.stringify('production')}}),// 通过插件抽离 css (参数)// 参数：表示将抽离的css文件生成到哪个目录中new ExtractTextPlugin("css/style.css"),// 压缩抽离之后的cssnew OptimizeCssAssetsPlugin(),// 启用 scope hoistingnew webpack.optimize.ModuleConcatenationPlugin()]}

下面给大家介绍下webpack打包后的JS文件如何部署？

webpack打包后的JS文件，怎样发布到生产环境使用？能发布到TOMCAT吗？还是需要其它的部署环境？

打包出来的文件你把它当成普通的js文件就好了，最不济，你复制到想放的目录在页面中引用，jquery.min,js怎么用，webpack打包出来的js文件你也怎么用。

总结

以上所述是小编给大家介绍的webpack打包js文件及部署的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！