웹 팩 포장 js 파일 및 배치 실현 방법

다음은 웹 팩 이 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()
]
}

웹 팩 을 포장 한 JS 파일 을 어떻게 배치 하 는 지 소개 해 드 리 겠 습 니 다.
웹 팩 을 포장 한 JS 파일 은 어떻게 생산 환경 에 발표 하여 사용 합 니까?TOMCAT 에 나 올 수 있 나 요?아니면 다른 배치 환경 이 필요 합 니까?
포 장 된 파일 은 일반적인 js 파일 이 라 고 생각 하 시 면 됩 니 다.가장 좋 지 않 습 니 다.놓 고 싶 은 디 렉 터 리 를 페이지 에서 참조 하 십시오.jquery.min,js 는 어떻게 사용 합 니까?webpack 에서 포 장 된 js 파일 도 어떻게 사용 합 니까?
총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 웹 팩 이 js 파일 을 포장 하고 배치 하 는 실현 방법 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!