安装

webpack版本

npm install -g webpack@3.5.6

压缩html插件html-webpack-plugin@3.2.0

npm install html-webpack-plugin@3.2.0

css 打包插件 extract-text-webpack-plugin

npm install extract-text-webpack-plugin@3.0.2

压缩css 插件 optimize-css-assets-webpack-plugin@3.2.0

npm install optimize-css-assets-webpack-plugin@3.2.0

webpack.config.js

// 配置
module.exports = {
	// 解决问题
	resolve: {
		// 拓展名
		extensions: ['.js', '.es'],
		// 别名
		alias: {
			vue$: 'vue/dist/vue.js'
		}
	},
	// 入口文件
	entry: {
		'00': './modules/00.js',
		'01': './modules/01.js',
		'02': './modules/02.js',
		'03': './modules/03.js',
		'04': './modules/04.js',
		'05': './modules/05.js',
		'06': './modules/06.js',
		'07': './modules/07.js',
		'08': './modules/08.js',
		'09': './modules/09.js'
	},
	// 发布位置
	output: {
		// 文件名
		// 注意：如果是4.0版本的，不要加dist目录，因为会默认向dist目录发布。
		filename: './dist/[name].js'
	},
    //模块
    module:{
        //加载机
        rules:[
            //es6
            {
                test:/\.(js|ejs)$/,
                loader:'babel-loader',
                //包括文件
                include:'/modules',
                //不包括文件
                exclude:'/node_modules',
                //额外选项
                options:{
                    //编译装置
                    presets:['es2015']
                }
            },
            //css
            {
                test:/\.css$/,
                loader:['style-loader','css-loader']
            },
            //less
            {
                test:/\.less$/,
                loader:['style-loader','css-loader','less-loader']
            },
            //sass
            {
                test:/\.(sass|scss)$/,
                loader:['style-loader','css-loader','less-loader']
            }
        ]
    }
}

利用webpack实现vue-cli 插件 压缩html

public 静态资源 index.html 模板资源 src 开发目录 assets 资源模板 views 页面组件 components 组件 App.vue 应用程序组件 main.js 入口文件 router.js 路由 store vuex

webpack.config.js

**// 引入path
let path = require('path');
// 引入模板插件
let HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入webpack
// let webpack = require('webpack');
// console.log(webpack)
// 引入插件
let { CommonsChunkPlugin, UglifyJsPlugin } = require('webpack').optimize;;
// css打包插件
let ExtractTextPlugin = require('extract-text-webpack-plugin');
// 压缩css
let OptimizeCssAssets = require('optimize-css-assets-webpack-plugin');
// 配置
module.exports = {
	// 解决问题
	resolve: {
		// 拓展
		extensions: ['.vue', '.js'],
		// 别名
		alias: {
			vue$: 'vue/dist/vue.js',
			// __dirname
			'@': path.join(process.cwd(), './src')
		}
	},
	// 入口
	// entry: './src/main.js',
	// 多个入口文件
	entry: {
		main: './src/main.js',
		lib: ['vue', 'vuex', 'vue-router']
	},
	// 发布
	output: {
		// 发布资源相对于example目录
		path: path.join(process.cwd(), '../'),
		// 发布静态资源
		// filename: './static/main.js'
		// 添加指纹
		// filename: './static/main.[hash:8].js'
		// 发布多个文件
		filename: './static/[name].js'
	},
	// 模块
	module: {
		// 加载机
		rules: [
			// es6
			{
				test: /\.js$/,
				// loader: 'babel-loader?presets[]=es2015',
				// loader: 'babel-loader',
				// query: {
				// 	presets: ['es2015']
				// }
				loader: 'babel-loader',
				options: {
					// 加载机
					presets: ['es2015']
				},
				// 包含目录
				include: path.join(process.cwd(), '/src/'),
				exclude: '/node_modules/'
			},
			// vue
			{
				test: /\.vue$/,
				loader: 'vue-loader',
				// 配置
				options: {
					// css打包
					extractCSS: true,
					// 加载机
					loaders: {
						js: 'babel-loader?presets[]=es2015'
					}
				}
			},
			// scss
			{
				test: /\.scss$/,
				// loader: 'style-loader!css-loader!sass-loader'
				// css打包
				loader: ExtractTextPlugin.extract({
					fallback: 'style-loader',
					// use: 'css-loader!sass-loader'
					use: ['css-loader', 'sass-loader']
				})
			}
		]
	},
	// 模板
	plugins: [
		// 处理模板
		new HtmlWebpackPlugin({
			// 模板位置
			template: './public/index.html',
			// 发布位置
			filename: './views/index.html',
			// 添加指纹
			hash: true
		}),
		// 拆分库文件
		new CommonsChunkPlugin('lib'),
		// css资源发布位置
		new ExtractTextPlugin('./static/style.css'),
		// 压缩css
		new OptimizeCssAssets(),
		// 压缩js
		new UglifyJsPlugin()
	]
}**