webpack打包js文件及部署的实现方法

下面看下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$/, // 抽离和压缩css use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, { test: /\.(sass|scss)$/, // 抽离和压缩 scss use: 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', // 配置 htmlWebpackPlugin plugins: [ new htmlWebpackPlugin({ template: path.join(__dirname, './src/index.html'), filename: 'index.html', // 压缩HTML minify: { // 移除空白 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"), // 压缩抽离之后的css new OptimizeCssAssetsPlugin(), // 启用 scope hoisting new webpack.optimize.ModuleConcatenationPlugin() ] }

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

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

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

总结

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