webpack3.x配置/dev-server相关配置说明及其他相关配置

第一种方式：在package.json进行设置；

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --content-base build --progress --host 127.0.0.1  --port 8080 --inline",

第二种方式：在webpack.config.js进行配置；

在module.exports的对象中进行配置；

const webpackServer = {
	protocol:'http://',
	host:'172.20.0.20',
	port:'3000'
}

devServer: {
	host: webpackServer.host,
	inline: true,
	port: webpackServer.port
	},

那么package.json中文件就不需要设置

historyApiFallback属性：值为布尔值；

需不需要在cmd命令中是否打印一连窜的输出进度，只需要在package.json中配置progress就可以的，不需要就不用配置。

上面是对webpack-dev-server的介绍，接下来看看其他相关配置，

由于webpack3.x压缩的效果不是特别好，压缩代码的体积非常庞大，效率比较低。所以必须要通过相关插件来提高代码压缩插件，从而提高代码的压缩比率，减轻代码单个文件的重量，不像4.x那样将很多相关插件全部集成余webpack-cli中，从而提高webpack的配置效率，提高工作的效率。

webpack3.x相关插件之webpack.optimize.CommonsChunkPlugin，提取第三库和公共模块。

 new webpack.optimize.CommonsChunkPlugin({
			name: 'base',
			filename: 'js/[name].[hash:8].js'
		  }),

webpack3.x相关插件之webpack.DefinePlugin，设置全局参数，通过你可以设置全局变量，在全局文件，你可以直接获取该变量，不需要声名定义。

new webpack.DefinePlugin({//设置全局变量
			ENV:JSON.stringify(process.env.NODE_ENV)
		}),

在这个根目录下的所有文件中，都能获取得到ENV这个参数的值。

webpack3.x相关插件之webpack.ProvidePlugin，可以设置全局模块，不需要通过import或require进行引入，仅能直接获取，无论网络第三方库还是自己定义的库，都能通过他进行设置；

new webpack.ProvidePlugin({//引入成为全局模块
			$$:"jquery", 
			jquery:"jquery",
			"window.jquery":"jquery",
			"http":'./component/http.js'
		}),

webpack3.x相关插件之热更新，每次编译自动保存，webpack.HotModuleReplacementPlugin；

new webpack.HotModuleReplacementPlugin(),

webpack3.x相关插件之模版插件，编译会自动生成一个html模版，不需要手动引入创建。

new htmlWebpackPlugin({
			template:__dirname+'/app/index.tmpl.html',
			//favicon:'./favicon.ico'
		}),

webpack3.x相关插件之自动开启默认浏览器

new openBrowser({
			url:webpackServer.protocol+webpackServer.host+':'+webpackServer.port
		}),

接下来重点介绍两款插件，一个就是将css和js代码给分割开的extract-text-webpack-plugin，另一个就是happypack采用多进程打包的插件。

由于本人常用于react开发，是当下比较流行mv*框架。在打包过程中，css样式也会被打包到js中，为了开发的方便快捷，采用此插件将转码好的css代码从js中脱离出来。

而happypack插件为了提高代码的编译速度，实现了多进程打包。

代码：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const HappyPack = require('happypack');

引入插件包，设置包的大小。

const happyThreadPool = HappyPack.ThreadPool({ size: 5 });
//加入happyThreadPool插件包；
function createHappyThread(id,loaders){
	return new HappyPack({
      id: id,
      threadPool: happyThreadPool,
      loaders: loaders,
      //cache:true
    })
}

{
				test:/\.(css|scss)$/,
				use: ExtractTextPlugin.extract({//分离和js代码。
					fallback: 'style-loader',
					use: 'happypack/loader?id=sass'
                    
				})
			
			},
			{
				test:/\.(js|jsx)$/,
				use:'happypack/loader?id=jsx'
				
			},
			{
				test:/\.json$/,
				use:'happypack/loader?id=json'
				
			},
			{
				test:/\.(png|jpg|gif|jpeg|svg)$/i,
				use:'file-loader?limit=2048&name=img/[hash:8].[name].[ext]'




 }

css插件

 //分离js与css样式插件；
		new	ExtractTextPlugin({
		    filename: '[name].min.css',
		    allChunks: true,
		}),

createHappyThread('jsx',[{
					loader:"babel-loader",
					 options: {
                    	cacheDirectory: true
               		 }
				}]),
		createHappyThread('sass',[{loader:'css-loader',options: {
                    minimize: true
                }},{loader:'postcss-loader',options: {
					sourceMap: true,
					config: {
						path: 'postcss.config.js'  // 这个得在项目根目录创建此文件
					}} },{loader:'fast-sass-loader',options: { sourceMap: true }}]),
		createHappyThread('json',['json-loader']),

以上就是我对webpack3.x部分插件的认识，如你有需要，您也可以去这个连接下载，可以去下载个人资源包：https://download.csdn.net/my/uploads，希望大家谬误之出，给予指正。

webpack3.x配置/dev-server相关配置说明及其他相关配置

猜你喜欢