webpack入门配置精讲

1、项目中安装webpack及webpack

yarn add webpack webpack-cli --dev

2、创建webpack配置文件
webpack.config.js

var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件

module.exports = {
    // 入口js文件
	entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件
    //遍历输出文件
	output: {
		path:  DIST_PATH,
		filename: "index.js",
	},
	devServer: {},
   //模 块解析
	module: {},
   //插件
	plugins:[]
}

3、package.json中添加快捷指令

"scripts": {
    "build": "webpack --config build/webpack.config.js --mode production"
  }

4、安装热启动服务器

yarn add webpack-dev-server --dev

5、配置热启动服务

var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件

module.exports = {
    // 入口js文件
	entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件
    //遍历输出文件
	output: {
		path:  DIST_PATH,
		filename: "index.js",
	},
	devServer: {
		hot:true,// 热更新
		contentBase: DIST_PATH,//热启动文件路径
		historyApiFallback: true,
		inline: true,
		host: '0.0.0.0',// 解决只能用localhost无法用本机IP访问项目,默认localhost
		port: 3000,//端口号
		disableHostCheck: true,//
		useLocalIp:true,//是否使用ip打开页面
		proxy:{},//跨域映射
		https:true//支持https
        },
   //模 块解析
	module: {},
   //插件
	plugins:[]
}

6、package.json中添加快捷指令

"scripts": {
    "build": "webpack --config build/webpack.config.js --mode production",
    "start": "webpack-dev-server --config build/webpack.config.js --mode development --open"
  }

7、webpack支持多入口文件打包

var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件
var SRC_PATH = path.resolve(__dirname,"../src");//获取当前文件夹上级目录下src文件

module.exports = {
    // 入口js文件
	//entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件  方式一
	entry:[SRC_PATH+'/index.js', SRC_PATH+'/test.js'] ,// 方式二
    //遍历输出文件
	output: {
		path:  DIST_PATH,
		filename: "index.js",
	},
	devServer: {
		hot:true,// 热更新
		contentBase: DIST_PATH,//热启动文件路径
		historyApiFallback: true,
		inline: true,
		host: '0.0.0.0',// 解决只能用localhost无法用本机IP访问项目,默认localhost
		port: 3000,//端口号
		disableHostCheck: true,//
                useLocalIp:true,//是否使用ip打开页面
		proxy:{},//跨域映射
                https:true//支持https
        },
   //模 块解析
	module: {},
   //插件
	plugins:[]
}

8、webpack支持多出口文件打包

var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件
var SRC_PATH = path.resolve(__dirname,"../src");//获取当前文件夹上级目录下src文件

module.exports = {
    // 入口js文件
	//entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件  方式一
	//entry:[SRC_PATH+'/index.js', SRC_PATH+'/test.js'], // 方式二
    //遍历输出文件
	entry:{
	    index:SRC_PATH+'/index.js',
    	test:SRC_PATH+'/test.js'
	},
	output: {
		path:  DIST_PATH,
		filename: [name].[chunkhash:5].js,//支持多文件输出,及hash混淆防止服务器缓存,并控制hash位数为5位
	},
	devServer: {
		hot:true,// 热更新
		contentBase: DIST_PATH,//热启动文件路径
		historyApiFallback: true,
		inline: true,
		host: '0.0.0.0',// 解决只能用localhost无法用本机IP访问项目,默认localhost
		port: 3000,//端口号
		disableHostCheck: true,//
                useLocalIp:true,//是否使用ip打开页面
		proxy:{},//跨域映射
                https:true//支持https
        },
   //模 块解析
	module: {},
   //插件
	plugins:[]
}

9、webpack支持自动检索多入口文件打包
首先安装glob

yarn add glob --dev

更改配置文件

var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var glob = require('glob');//引入glob模块
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件
var SRC_PATH = path.resolve(__dirname,"../src");//获取当前文件夹上级目录下src文件

var entryFiles={};
var files=glob.sync(path.join(SRC_PATH,'/**/*.js'));//正则匹配获取SRC_PATH下面所有文件路径
files.forEach(function(file,index){
      var subkey = file.match(/src\/(\S*)\.js/)[1];//正则表达获取文件名
      entryFiles[subkey]=file;
})

module.exports = {
    // 入口js文件
	//entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件  方式一
	//entry:[SRC_PATH+'/index.js', SRC_PATH+'/test.js'], // 方式二
    //遍历输出文件
	entry: entryFiles,
	output: {
		path:  DIST_PATH,
		filename: [name].[chunkhash:5].js,//支持多文件输出,及hash混淆防止服务器缓存,并控制hash位数为5位
	},
	devServer: {
		hot:true,// 热更新
		contentBase: DIST_PATH,//热启动文件路径
		historyApiFallback: true,
		inline: true,
		host: '0.0.0.0',// 解决只能用localhost无法用本机IP访问项目,默认localhost
		port: 3000,//端口号
		disableHostCheck: true,//
		useLocalIp:true,//是否使用ip打开页面
		proxy:{},//跨域映射
		https:true//支持https
        },
   //模 块解析
	module: {},
   //插件
	plugins:[]
}

10、webpack支持自动生成html模版
首先安装html-webpack-plugin

yarn add html-webpack-plugin --dev

更改配置文件

var webpack = require('webpack'); //引入webpack模块
var path = require('path'); //引入node的path模块
var glob = require('glob');//引入glob模块
var htmlWebpackPlugin = require('html-webpack-plugin');
var DIST_PATH = path.resolve(__dirname,"../dist");//获取当前文件夹上级目录下dist文件
var SRC_PATH = path.resolve(__dirname,"../src");//获取当前文件夹上级目录下src文件

var entryFiles={};
var files=glob.sync(path.join(SRC_PATH,'/**/*.js'));//正则匹配获取SRC_PATH下面所有文件路径
files.forEach(function(file,index){
      var subkey = file.match(/src\/(\S*)\.js/)[1];//正则表达获取文件名
      entryFiles[subkey]=file;
})

module.exports = {
    // 入口js文件
	//entry: path.resolve(__dirname,"../src/index.js"),//获取当前文件夹上级目录下src文件夹下index.js文件  方式一
	//entry:[SRC_PATH+'/index.js', SRC_PATH+'/test.js'], // 方式二
    //遍历输出文件
	entry: entryFiles,
	output: {
		path:  DIST_PATH,
		filename: [name].[chunkhash:5].js,//支持多文件输出,及hash混淆防止服务器缓存,并控制hash位数为5位
	},
	devServer: {
		hot:true,// 热更新
		contentBase: DIST_PATH,//热启动文件路径
		historyApiFallback: true,
		inline: true,
		host: '0.0.0.0',// 解决只能用localhost无法用本机IP访问项目,默认localhost
		port: 3000,//端口号
		disableHostCheck: true,//
		useLocalIp:true,//是否使用ip打开页面
		proxy:{},//跨域映射
		https:true//支持https
        },
   //模 块解析
	module: {},
   //插件
	plugins:[
   	  new htmlWebpackPlugin({
   	     filename: DIST_PATH+'index.html',//生成后导出的文件路径
   	     title:'测试',//导出文件的标题,
   	     template:path.resolve(__dirname,'../index.html'),//需要参照的html文件路径
   	     inject:true,//body head true,
   	     hash:true,
   	     minfy:true,//是否压缩
   	     chunks:['index']//只动态引入哪些文件配置
   	  })
	]
}

html中动态标题配置

<%=htmlWebpackPlugin.options.title%>

11、打包提取公共组件
在module.exports 中添加属性

optimization: {
  splitChunks: {
    chunks: 'initial', //async 异步(import()语法) initial(同步import xxx from 'xxx') all(所有)
    minSize: 10000, // 模块的最小体积
    minChunks: 1, // 模块的最小被引用次数
    maxAsyncRequests: 5, // 按需加载的最大并行请求数
    maxInitialRequests: 3, // 一个入口最大并行请求数
    automaticNameDelimiter: '~', // 抽取出来的文件的自动生成名字的分割符,默认为 ~;
    name: true, // 抽取出来文件的名字,默认为 true,表示自动生成文件名;
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10, // 优先级配置项
        minChunks: 1, // 表示被引用次数,默认为1
        reuseExistingChunk: true
      }
    }
  }
}
  • 课程地址
  • WebPack提取公共组件 项目
  • 入门 Webpack,看这篇就够了
  • 一劳永逸」由浅入深配置webpack4
  • webpack打包原理 ? 看完这篇你就懂了 !

你可能感兴趣的:(我的前端)