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')
/
/ ⼊⼝
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: act({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(sass|scss)$/,
// 抽离和压缩 scss
use: act({
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]'
}
}
},
{
svg文件怎么生成// 参考上⾯图⽚的配置，进⾏配置即可
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({
'v': {
'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⽂件及部署的实现⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。