前言
本文将从0开始配置一个webpack打包一个项目的完整流程。
准备工作
打开终端 新建一个文件夹 用于管理项目
mkdir webpack4-demo
创建项目
在项目内部打开集成终端
npm init 生成 一个package.json
{
"name": "webpack4-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
新建dist,src,config目录
mkdir dist src config
在src下新建一个index.js,作为项目的主入口,
cd src
touch index.js
在dist目录下新建一个index.html,并引用index.js
cd dist
touch index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack example</title>
</head>
<body>
</body>
<script src="../src/index.js"></script>
</html>
安装webpack相关插件
npm install webpack webpack-cli webpack-dev-server -D
在package.json中添加webpack编译脚本
{
"name": "webpack4-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack src/index.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.29.6"
},
"dependencies": {
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
}
}
执行编译命令
npm run build
终端会给我们弹出警告,没问题,大概的意思就是webpack的mode参数没有设置,默认下会使用production模式。
webpack4中提供的mode有两个值:开发环境development和生产环境production,默认值是 production。mode是我们为减小生产环境构建体积以及节约开发环境的构建时间提供的一种优化方案,提供对应的构建参数项的默认开启或关闭,降低配置成本。
打包的时候输入webpack --mode=development或者webpack --mode=production就不会出现警告提示了。
development模式下,将侧重于功能调试和优化开发体验,包含如下内容:
- 浏览器调试工具
- 开发阶段的详细错误日志和提示
- 快速和优化的增量构建机制
production模式下,将侧重于模块体积优化和线上部署,包含如下内容:
- 开启所有的优化代码
- 更小的bundle大小
- 去除掉只在开发阶段运行的代码
- Scope hoisting和Tree-shaking
- 自动启用uglifyjs对代码进行压缩
配置自定义打包环境
首先,移除之前编译后的包
rm dist/main.js
然后,在config目录下生成一个webpack.config.js
cd config
touch webpack.config.js
执行成功后我们的目录结构大致是这样的:
接下来我们编写我们的webpack.config.js
const path = require('path');//处理路径信息
const config = {
mode:'development', // development || production
entry:path.resolve(__dirname,'../src/index.js'),//webpack 打包入口文件
output:{
path:path.resolve(__dirname,'../src/dist'),//打包完成放置位置
filename:'main.js'//打包后的文件名
},
module:{//例如如何解读css,图片如何转换,压缩等
rules:[{
test:'/\.js$/', //匹配所有的js文件
exclude:/node_modules/,//除了node_modules以外
}]
},
//插件,用于生产模板和各项功能
plugins:[],
//配置webpack开发服务器功能
devServer:{}
}
module.exports = config
修改package.json中webpack的配置
{
"name": "webpack4-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack --config=config/webpack.config.js "
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.29.6"
},
"dependencies": {
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
}
}
执行打包命令,生成打包后的文件
npm run build
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/index.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("\n\n//# sourceURL=webpack:///./src/index.js?");
/***/ })
/******/ });
如果有多个入口文件的话可以参照下面代码:
const path = require('path');//处理路径信息
const config = {
mode:'development', // development || production
entry:{
//里面的main是可以随便写的
main:'../src/main.js',
main:'../src/main2.js' //这里新添加一个入口文件
},//webpack 打包入口文件
output:{
path:path.resolve(__dirname,'../src/dist'),//打包完成放置位置
filename:'[name].js'//打包后的文件名 意思是进来是什么名字出来就是上面名字
},
module:{//例如如何解读css,图片如何转换,压缩等
rules:[{
test:'/\.js$/', //匹配所有的js文件
exclude:/node_modules/,//除了node_modules以外
}]
},
//插件,用于生产模板和各项功能
plugins:[],
//配置webpack开发服务器功能
devServer:{}
}
module.exports = config
配置development环境下的调试服务
const path = require('path');//处理路径信息
const config = {
mode:'development', // development || production
entry:path.resolve(__dirname,'../src/index.js'),//webpack 打包入口文件
output:{
path:path.resolve(__dirname,'../dist'),//打包完成放置位置
filename:'main.js'//打包后的文件名
},
module:{//例如如何解读css,图片如何转换,压缩等
rules:[{
test:'/\.js$/', //匹配所有的js文件
exclude:/node_modules/,//除了node_modules以外
}]
},
//插件,用于生产模板和各项功能
plugins:[],
//配置webpack开发服务器功能
devServer:{
// 设置基本目录结构
contentBase:path.resolve(__dirname,'../dist'),
//服务器的ip地址 可以使用ip也可以使用localhost
host:'localhost',
//服务器压缩是否开启
compress:true,
//配置服务端口号
port:9999
}
}
module.exports = config
配置css打包支持
我们需要在module里面配置loaders,loaders可以把SASS文件的写法转换成CSS,也可以把我们项目中写的ES6、ES7等给编译成浏览器能解析的js,下面我们先在src文件夹下面创建index.css文件,并且写一些css在里面。
我们先在index.html中加入如下代码:
<body>
<div id="root">
<h2 class="title">Hello webpack4</h2>
</div>
</body>
然后在index.css中编写如下代码:
.title{
color: chocolate;
}
然后我们执行打包命令:
npm run server
我们可以发现,打包失败,错误原因是打包css等文件需要配置另外的loaders支持。
注意:打包css的时候style-loader,css-loader是必须要装的,我们这里再把sass-loader和less-loader装起来 支持对sass和less样式文件的编译
npm i style-loader css-loader sass-loader less-loader -D
配置完成的webpack.config.js
const path = require('path');//处理路径信息
const config = {
mode: 'development', // development || production
entry: path.resolve(__dirname, '../src/index.js'),//webpack 打包入口文件
output: {
path: path.resolve(__dirname, '../dist'),//打包完成放置位置
filename: 'main.js'//打包后的文件名
},
module: {//例如如何解读css,图片如何转换,压缩等
rules: [
{
test: /\.js$/, //匹配所有的js文件
exclude: /node_modules/,//除了node_modules以外
},
//配置css loaders
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
]
},
//插件,用于生产模板和各项功能
plugins: [],
//配置webpack开发服务器功能
devServer: {
// 设置基本目录结构
contentBase: path.resolve(__dirname, '../dist'),
//服务器的ip地址 可以使用ip也可以使用localhost
host: 'localhost',
//服务器压缩是否开启
compress: true,
//配置服务端口号
port: 9999
}
}
module.exports = config
测试结果:
我们发现颜色已经正常的改变了,接下来我们试试用sass来编写(less同理)
1.修改index.css为index.scss
2.修改引入为 import ‘./index.scss’
index.scss
$titleColor:pink;
.title{
color: $titleColor;
}
执行打包命令
npm run server
如果遇到以下错误
执行安装命令后执行打包命令
npm install node-sass --save-dev
我们可以看到正确的结果
到这里为止某些细心的人可能发现配置css打包的时候跟某些查阅到的资料略有不同,少了一个ExtractTextPlugin.extract
配置,这个配置是干什么用的呢?
extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
我们上面的配置,打包出来的css会被嵌入到index.html中的head中。
如果需要配置ExtractTextPlugin.extract
,我们需要安装这个插件,并且修改配置文件
npm install extract-text-webpack-plugin@next --save-dev
或者使用官方推荐的这个css插件,mini-css-extract-plugin,详细的配置教程等文章末尾进行阐述。
配置完成的webpack.config.js
const path = require('path');//处理路径信息
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
mode: 'development', // development || production
entry: path.resolve(__dirname, '../src/index.js'),//webpack 打包入口文件
output: {
path: path.resolve(__dirname, '../dist'),//打包完成放置位置
filename: 'main.js'//打包后的文件名
},
module: {//例如如何解读css,图片如何转换,压缩等
rules: [
{
test: /\.js$/, //匹配所有的js文件
exclude: /node_modules/,//除了node_modules以外
},
//配置css loaders
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader', // 编译后用什么loader来提取css文件
use: 'css-loader',//需要什么样的loader去编译文件
publicPath: '../' //解决css背景图的路径问题
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'less-loader']
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
},
//插件,用于生产模板和各项功能
plugins: [
new ExtractTextPlugin("style.css"),
],
//配置webpack开发服务器功能
devServer: {
// 设置基本目录结构
contentBase: path.resolve(__dirname, '../dist'),
//服务器的ip地址 可以使用ip也可以使用localhost
host: 'localhost',
//服务器压缩是否开启
compress: true,
//配置服务端口号
port: 9999
}
}
module.exports = config
同时修改index.html为如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<title>webpack example</title>
</head>
<body>
<div id="root">
<h2 class="title">Hello webpack4</h2>
</div>
</body>
<script src="./main.js"></script>
</html>
自动添加css前缀
为了某些兼容性问题,我们配置一个css兼容性插件postCss
npm i postcss-loader autoprefixer -D
新建一个postcss.config.js文件
module.exports = {
plugins: [
require('autoprefixer')//自动添加css前缀
]
}
配置完成后的文件
const path = require('path');//处理路径信息
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
mode: 'development', // development || production
entry: path.resolve(__dirname, '../src/index.js'),//webpack 打包入口文件
output: {
path: path.resolve(__dirname, '../dist'),//打包完成放置位置
filename: 'main.js'//打包后的文件名
},
module: {//例如如何解读css,图片如何转换,压缩等
rules: [
{
test: /\.js$/, //匹配所有的js文件
exclude: /node_modules/,//除了node_modules以外
},
//配置css loaders
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader', // 编译后用什么loader来提取css文件
use: ['css-loader','postcss-loader'],//需要什么样的loader去编译文件
publicPath: '../' //解决css背景图的路径问题
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','less-loader']//防置再最后的loader首先被执行
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
},
//插件,用于生产模板和各项功能
plugins: [
new ExtractTextPlugin("style.css")
],
//配置webpack开发服务器功能
devServer: {
// 设置基本目录结构
contentBase: path.resolve(__dirname, '../dist'),
//服务器的ip地址 可以使用ip也可以使用localhost
host: 'localhost',
//服务器压缩是否开启
compress: true,
//配置服务端口号
port: 9999
}
}
module.exports = config
配置消除冗余的css插件 Purifycss 并且打包html文件
安装相关插件
npm i purifycss-webpack purify-css html-webpack-plugin glob -D
html-webpack-plugin用于自动将打包后的js和css文件注入html文件中
这个插件需要glob插件的辅助
我们来修改一下目录的结构,把配置文件提取出来:
修改webpack.config.js
const path = require('path');//处理路径信息
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCssWebpack = require('purifycss-webpack');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
const webpack = require('webpack');//热更新
const config = {
mode: 'development', // development || production
entry: path.resolve(__dirname, 'src/index.js'),//webpack 打包入口文件
output: {
path: path.resolve(__dirname, 'dist'),//打包完成放置位置
filename: 'main.js',//打包后的文件名
},
module: {//例如如何解读css,图片如何转换,压缩等
rules: [
{
test: /\.js$/, //匹配所有的js文件
exclude: /node_modules/,//除了node_modules以外
},
//配置css loaders
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader', // 编译后用什么loader来提取css文件
use: ['css-loader', 'postcss-loader'],//需要什么样的loader去编译文件
publicPath: '../' //解决css背景图的路径问题
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','less-loader']//防置再最后的loader首先被执行
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
},
//插件,用于生产模板和各项功能
plugins: [
new ExtractTextPlugin("styles.css"),
new webpack.HotModuleReplacementPlugin(),//在webpack工程中要实现热加载,就是只更新局部的修改
new webpack.NoEmitOnErrorsPlugin(),//热更相关插件
new HtmlWebpackPlugin({
template: 'src/index.html', //模板地址
filename:'index.html',//生成的dist下的模板名称
minify:{
removeComments:true,
collapseWhitespace:true
}
}),
new PurifyCssWebpack({ //消除冗余代码
// 首先保证找路径不是异步的,所以这里用同步的方法
// path.join()也是path里面的方法,主要用来合并路径的
// 'src/*.html' 表示扫描每个html的css
paths: glob.sync(path.join(__dirname, 'src/*.html'))
})
],
//配置webpack开发服务器功能
devServer: {
// 设置基本目录结构
contentBase: path.resolve(__dirname, 'dist'),
//服务器的ip地址 可以使用ip也可以使用localhost
host: 'localhost',
//服务器压缩是否开启
compress: true,
//配置服务端口号
port: 9999,
//启动webpack-dev-server时自动打开浏览器
open:false,
//启用热更
hot:true
}
}
module.exports = config
下面我们来配置JS压缩
我们使用这个插件来配置uglifyjs-webpack-plugin
npm i uglifyjs-webpack-plugin -D
引入后在plugins配置里new一个 uglify对象就可以了。
plugins:[
new uglify()
],
配置css 图片压缩
压缩成功js后 我们来配置一下css图片压缩的功能
首先我们去下载一张图片
修改index.scss样式为:
$titleColor:pink;
$baseMargin:10px;
.title{
color: $titleColor;
}
.flex-box{
display: flex;
width:600px;
justify-content: space-between;
align-items: center;
margin-top: $baseMargin;
.a,.b{
width: 200px;
height: 200px;
}
.a{
background-image: url("./images/test.jpg");
background-position: center;
background-size: contain;
}
.b{
background-color: violet;
}
}
执行编译命令后,直接报错
这里是因为我们缺少loader的解析,现在需要下载两个解析图片的loader file-loader 和 url-loader
npm install --save-dev file-loader url-loader
file-loader
:解决引用路径的问题,拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。url-loader
:如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。
修改webpack.config.js文件配置:
const path = require('path');//处理路径信息
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCssWebpack = require('purifycss-webpack');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
const webpack = require('webpack');//热更新
const uglify = require('uglifyjs-webpack-plugin');//压缩js
const config = {
mode: 'development', // development || production
entry: path.resolve(__dirname, 'src/index.js'),//webpack 打包入口文件
output: {
path: path.resolve(__dirname, 'dist'),//打包完成放置位置
filename: 'main.js',//打包后的文件名
},
module: {//例如如何解读css,图片如何转换,压缩等
rules: [
{
test: /\.js$/, //匹配所有的js文件
exclude: /node_modules/,//除了node_modules以外
},
//配置css loaders
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader', // 编译后用什么loader来提取css文件
use: ['css-loader', 'postcss-loader'],//需要什么样的loader去编译文件
publicPath: '../' //解决css背景图的路径问题
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','less-loader']//防置再最后的loader首先被执行
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test:/\.(png|jpg|gif|jpeg)/, //匹配图片文件后缀名称
use:[{
loader:'url-loader', //是指定使用的loader和loader的配置参数
options:{
limit:500 //把小于500B的文件打成Base64的格式,写入JS
}
}]
}
]
},
//插件,用于生产模板和各项功能
plugins: [
new uglify(),//压缩js文件
new ExtractTextPlugin("styles.css"),
new webpack.HotModuleReplacementPlugin(),//在webpack工程中要实现热加载,就是只更新局部的修改
new webpack.NoEmitOnErrorsPlugin(),//热更相关插件
new HtmlWebpackPlugin({
template: 'src/index.html', //模板地址
filename:'index.html',//生成的dist下的模板名称
minify:{
removeComments:true,
collapseWhitespace:true
}
}),
new PurifyCssWebpack({ //消除冗余代码
// 首先保证找路径不是异步的,所以这里用同步的方法
// path.join()也是path里面的方法,主要用来合并路径的
// 'src/*.html' 表示扫描每个html的css
paths: glob.sync(path.join(__dirname, 'src/*.html'))
})
],
//配置webpack开发服务器功能
devServer: {
// 设置基本目录结构
contentBase: path.resolve(__dirname, 'dist'),
//服务器的ip地址 可以使用ip也可以使用localhost
host: 'localhost',
//服务器压缩是否开启
compress: true,
//配置服务端口号
port: 9999,
//启动webpack-dev-server时自动打开浏览器
open:false,
//启用热更
hot:true
}
}
module.exports = config
压缩css文件
OK,到这步我们已经可以完成大部分的打包任务了,但是发现打出来的css文件还是和编写的一样,没有进行压缩操作。接下来我们就来压缩css文件。
安装插件optimize-css-assets-webpack-plugin
npm i optimize-css-assets-webpack-plugin -D
const path = require('path');//处理路径信息
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCssWebpack = require('purifycss-webpack');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
const webpack = require('webpack');//热更新
const uglify = require('uglifyjs-webpack-plugin');//压缩js
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件
const config = {
mode: 'development', // development || production
entry: path.resolve(__dirname, 'src/index.js'),//webpack 打包入口文件
output: {
path: path.resolve(__dirname, 'dist'),//打包完成放置位置
filename: 'main.js',//打包后的文件名
},
module: {//例如如何解读css,图片如何转换,压缩等
rules: [
{
test: /\.js$/, //匹配所有的js文件
exclude: /node_modules/,//除了node_modules以外
},
//配置css loaders
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader', // 编译后用什么loader来提取css文件
use: ['css-loader', 'postcss-loader'],//需要什么样的loader去编译文件
publicPath: '../' //解决css背景图的路径问题
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','less-loader']//防置再最后的loader首先被执行
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test:/\.(png|jpg|gif|jpeg)/, //匹配图片文件后缀名称
use:[{
loader:'url-loader', //是指定使用的loader和loader的配置参数
options:{
limit:500 //把小于500B的文件打成Base64的格式,写入JS
}
}]
}
]
},
//插件,用于生产模板和各项功能
plugins: [
new uglify(),//压缩js文件
new ExtractTextPlugin("styles.css"),
new OptimizeCssAssetsPlugin(),//执行压缩抽离出来的css
new webpack.HotModuleReplacementPlugin(),//在webpack工程中要实现热加载,就是只更新局部的修改
new webpack.NoEmitOnErrorsPlugin(),//热更相关插件
new HtmlWebpackPlugin({
template: 'src/index.html', //模板地址
filename:'index.html',//生成的dist下的模板名称
minify:{
removeComments:true,
collapseWhitespace:true
}
}),
new PurifyCssWebpack({ //消除冗余代码
// 首先保证找路径不是异步的,所以这里用同步的方法
// path.join()也是path里面的方法,主要用来合并路径的
// 'src/*.html' 表示扫描每个html的css
paths: glob.sync(path.join(__dirname, 'src/*.html'))
})
],
//配置webpack开发服务器功能
devServer: {
// 设置基本目录结构
contentBase: path.resolve(__dirname, 'dist'),
//服务器的ip地址 可以使用ip也可以使用localhost
host: 'localhost',
//服务器压缩是否开启
compress: true,
//配置服务端口号
port: 9999,
//启动webpack-dev-server时自动打开浏览器
open:false,
//启用热更
hot:true
}
}
module.exports = config
配置支持ES6+
到上面的步骤我们都是在webpack支持编译js的情况下进行的,现在我们改写配置让其可以编译ES6以上的js代码。
这里我们需要使用bable相关插件
npm i babel-core babel-loader babel-preset-env babel-plugin-transform-class-properties -D
如遇以下错误,请修改bable-loader版本
npm i bable-loader@7 -D
配置后的webpack.config
const path = require('path');//处理路径信息
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCssWebpack = require('purifycss-webpack');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
const webpack = require('webpack');//热更新
const uglify = require('uglifyjs-webpack-plugin');//压缩js
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件
const config = {
mode: 'development', // development || production
entry: path.resolve(__dirname, 'src/index.js'),//webpack 打包入口文件
output: {
path: path.resolve(__dirname, 'dist'),//打包完成放置位置
filename: 'main.js',//打包后的文件名
},
module: {//例如如何解读css,图片如何转换,压缩等
rules: [
{
test: /\.js$/, //匹配所有的js文件
exclude: /(node_modules|bower_components)/,//除了node_modules等以外
use: {
loader: "babel-loader",
options:{
presets:['env'],
plugins:['transform-class-properties']
}
}
},
//配置css loaders
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader', // 编译后用什么loader来提取css文件
use: ['css-loader', 'postcss-loader'],//需要什么样的loader去编译文件
publicPath: '../' //解决css背景图的路径问题
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','less-loader']//防置再最后的loader首先被执行
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test:/\.(png|jpg|gif|jpeg)/, //匹配图片文件后缀名称
use:[{
loader:'url-loader', //是指定使用的loader和loader的配置参数
options:{
limit:500 //把小于500B的文件打成Base64的格式,写入JS
}
}]
}
]
},
//插件,用于生产模板和各项功能
plugins: [
new uglify(),//压缩js文件
new ExtractTextPlugin("styles.css"),
new OptimizeCssAssetsPlugin(),//执行压缩抽离出来的css
new webpack.HotModuleReplacementPlugin(),//在webpack工程中要实现热加载,就是只更新局部的修改
new webpack.NoEmitOnErrorsPlugin(),//热更相关插件
new HtmlWebpackPlugin({
template: 'src/index.html', //模板地址
filename:'index.html',//生成的dist下的模板名称
minify:{
removeComments:true,
collapseWhitespace:true
}
}),
new PurifyCssWebpack({ //消除冗余代码
// 首先保证找路径不是异步的,所以这里用同步的方法
// path.join()也是path里面的方法,主要用来合并路径的
// 'src/*.html' 表示扫描每个html的css
paths: glob.sync(path.join(__dirname, 'src/*.html'))
})
],
//配置webpack开发服务器功能
devServer: {
// 设置基本目录结构
contentBase: path.resolve(__dirname, 'dist'),
//服务器的ip地址 可以使用ip也可以使用localhost
host: 'localhost',
//服务器压缩是否开启
compress: true,
//配置服务端口号
port: 9999,
//启动webpack-dev-server时自动打开浏览器
open:false,
//启用热更
hot:true
}
}
module.exports = config
到此为止基础的webpack打包教程已经告一段落,详细的配置代码见github。
如有不恰当之处,还请指出。