webpack4实用配置指南-上手篇

# webpack4 把命令行工具抽离成了独立包 webpack-cli
npm install webpack webpack-cli -D

├── dist
│   └── main.js
├── node_modules
├── package-lock.json
├── package.json
└── src
    ├── index.js
    └── utils.js

// package.json
"scripts": {
    "build": "webpack --mode development"
},

// webpack.config.js
module.exports = {
    mode: 'development', // development|production
	entry: '', // 入口配置
	output: {}, // 输出配置
	module: {}, // 放置loader加载器，webpack本身只能打包commonjs规范的js文件，用于处理其他文件或语法
	plugins: [], // 插件，扩展功能
	// 以下内容进阶篇再涉及
	resolve: {}, // 为引入的模块起别名
	devServer: {} // webpack-dev-server
};

const path = require('path');

module.exports = {
	entry: ['./src/index.js', './src/index2.js'], // 入口文件
	output: {
		filename: 'bundle.js', // 打包输出文件名
		path: path.join(__dirname, './dist') // 打包输出路径（必须绝对路径，否则报错）
	}
};

const path = require('path');

module.exports = {
    entry: { // 入口文件，传入对象，定义不同的chunk（如app, utils）
        app: './src/index.js', 
        utils: './src/utils.js'
    },
    output: {
        // filename: 'bundle.js', // 此时因为有多个chunk，因此不能只定义一个输出文件，否则报错
        filename: '[name].[hash].js', 
        path: path.join(__dirname, './dist') 
    }
};

npm install -D clean-webpack-plugin

// webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin');
const cdnDir = path.resolve(__dirname, '../../../', 'imgcache.gtimg.cn/vip/')
module.exports = {
	...
	plugins: [
		new CleanWebpackPlugin(['dist']), // 清空项目根目录下dist
		new CleanWebpackPlugin(['dist/images', 'dist/style']),
		new CleanWebpackPlugin(['dist'], {
			root: cdnDir // 指定根目录 清空cdn目录下的dist
		}),
	]
};

npm install html-webpack-plugin -D

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	...
	plugins: [
		new HtmlWebpackPlugin({
			filename: path.join(__dirname, 'entry.html'), // 生成的html(绝对路径：可用于生成到根目录)
            filename: 'html/entry.html', // 生成的html文件名（相对路径：将生成到output.path指定的dist目录下）
            template: './src/index.html' // 以哪个文件作为模板，不指定的话用默认的空模板
        })
	]
};

module.exports = {
	...
	plugins: [
		new HtmlWebpackPlugin({
            filename: 'html/page1.html', 
            template: './src/index.html',
            chunks: ['utils', 'app']
        }),
        new HtmlWebpackPlugin({
            filename: 'html/page2.html', 
            template: './src/index2.html',
            chunks: ['app'],
            minify: {
                removeComments: true // 删除注释
            },
            hash: true // 加hash
        })
	]
};

npm install -D css-loader # 负责处理其中的@import和url()
npm install -D style-loader # 负责内联

npm install -D less less-loader # less编译，处理less文件

// index.js
import './style/index.css';
import './style/test.less';

// webpack.config.js
module.exports = {
	...
	module: {
        rules: [
            {
                test: /\.css$/,
                // 从右到左，loader安装后无需引入可直接使用
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: [
                    {loader: 'style-loader'},
                    {loader: 'css-loader'},
                    {loader: 'less-loader'}
                ]
            }
        ]
    }
};

# @next为webpack4使用版本
npm install -D extract-text-webpack-plugin@next

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

// 实例化1：用于CSS
const extractCSS = new ExtractTextPlugin({
	disable: process.env.NODE_ENV == 'development' ? true : false, // 开发环境下直接内联，不抽离
    filename: 'style/extractFromCss.css', // 单个entry时，可写死
    filename: 'style/[name].css', // 多entry时
});
// 实例化2：用于LESS
const extractLESS = new ExtractTextPlugin({省略...});

module.exports = {
	module: {
		rules: [
			{
				test: /\.css$/,
				use: extractCSS.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
			},
			{
                test: /\.less$/,
                use: extractLESS.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'less-loader']
                })
            }
		]
	},
	plugins: [extractCSS, extractLESS]
};

console.log(extractCSS.extract({
	fallback: 'style-loader',
    use: ['css-loader']
}));

// 等价
extractCSS.extract()
ExtractTextPlugin.extract()

const extractCSS = new ExtractTextPlugin({
	disable: false,
    filename: 'style/[name].css',
    allChunks: true //设置为true
});

npm install -D url-loader file-loader

<!-- 正确：会交给url-loader 或 file-loader -->
<!-- require让图片和html产生依赖引用关系 -->
<img src="<%= require('./images/sett1.png') %>" alt="">

<!-- 错误：原样输出，不做任何处理 -->
<img src="./images/sett1.png" alt="">

/* 图片作为背景图 */
#main {
    background: url("../images/cjl.jpg") #999;
    color: #fff
}

// app.js
import sett1 from './images/sett1.png';
const img = document.createElement('img');
img.src = sett1;
document.body.appendChild(img);

// webpack.config.js
module.exports = {
	...
	modules: {
		rules: [
			{
				test: /\.(png|jpe?g|gif)$/,
				use: {
					loader: 'url-loader',
					options: {
						limit: 1024 * 8, // 8k以下的base64内联，不产生图片文件
						fallback: 'file-loader', // 8k以上，用file-loader抽离（非必须，默认就是file-loader）
						name: '[name].[ext]?[hash]', // 文件名规则，默认是[hash].[ext]
						outputPath: 'images/', // 输出路径
						publicPath: ''  // 可访问到图片的引用路径(相对/绝对)
					}
				}
			}
		]
	}
};

extractCSS.extract({
	fallback: 'style-loader',
	use: 'css-loader',
	publicPath: '../' // 默认取output.publicPath
})

npm install -D babel-core babel-loader babel-preset-env babel-preset-stage-0

// webpack.config.js
module: {
	rules: [
		{
	        test: /\.js$/,
	        exclude: /node_modules/, // npm包不做处理
	        include: /src/, // 只处理src里面的
	        use: {
	            loader: 'babel-loader',
	            options: {
	                presets: ['env', 'stage-0'] // 【重要】顺序右到左，先处理高级或特殊语法
                }
            }
        }
	]
}

{
	"presets": ["env", "stage-0"]
}

devServer: {
	contentBase: './public', 
    publicPath: '/',
	host: 'localhost',
	port: 3000
}

ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./public

devServer: {
    index: 'main.html', // 为了可以展示目录
    contentBase: __dirname, // 默认值就是项目根目录
    host: 'localhost',
    port: 3000
}

devServer: {
	host: 'localhost',
	port: 3000,
	hot: true // 还需要在plugins中配置new webpack.HotModuleReplacementPlugin()
}

// index.js
import './dependency.js';

if (module.hot) {
	module.hot.accept();
}

devServer: {
    host: '192.168.0.104', // 默认值是localhost
    port: 3000,
    hot: true
}

devServer: {
    host: '127.0.0.1',
    port: 80,
    hot: true,
    allowedHosts: [ // 允许哪些域名访问devServer
	    'y.qq.com'
    ]
}

// bad: 入侵代码
const url = process.env.NODE_ENV == 'development' 
	? 'http://127.0.0.1:8360/common/getmultiple' 
	: '/common/getmultiple'

devServer: {
    host: '127.0.0.1',
    port: 3000,
    hot: true,
    proxy: {
	    "/common/getmultiple": "http://localhost:3000"
    }
}