webpack4入门和使用
webpack介绍
这是webpak的上的基本的介绍：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle。
webpack的文档 https://webpack.docschina.org…
新接手的项目，从轮子开始就自己搭建。网上也找了很久的,也没找到很合适的轮子，那就自己建一个吧。wewebpack4 也更新了很多东西。
新建项目
mkdir webpack-init
cd webpack-init
npm init
之后就跟着提示把package.json中的信息补充完整就可以了.
新建JS文件
目录
.
├── ./package.json
├── ./src
│ └── ./src/index.js
├── ./webpack.config.js
├── ./yarn-error.log
└── ./yarn.lock其中webpack.config.js 如下
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
module.exports = {
entry: './src/index.js', //入口文件，src下的index.js
output: {
path: path.join(__dirname, 'dist'), // 出口目录，dist文件
filename: '[name].[hash].js' //这里name就是打包出来的文件名，因为是单入口，就是main，多入口下回分解
},
module: {},
plugin: [],
devServer: {
contentBase: path.join(__dirname, 'dist'), //静态文件根目录
port: 8080, // 端口
host: 'localhost',
overlay: true,
compress: true // 服务器返回浏览器的时候是否启动gzip压缩
}
};添加插件
js文件加载
yarn add ]babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 -D新建.babelrc 文件
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": []
//babel-core 调用Babel的API进行转码
//babel-loader
//babel-preset-es2015 用于解析 ES6
//babel-preset-react 用于解析 JSX
//babel-preset-stage-0 用于解析 ES7 提案
} /*src文件夹下面的以.js结尾的文件，要使用babel解析*/
/*cacheDirectory是用来缓存编译结果，下次编译加速*/
module: {
rules: [{
test: /\.js$/,
use: ['babel-loader?cacheDirectory=true'],
include: path.join(__dirname, 'src')
}]
}css文件加载
yarn add style-loader -D
yarn add css-loader -D添加配置：
rules: {
test: /\.css$/,
use: ['style-laoder', 'css-loader'],
include: path.join(__dirname, 'src'), //限制范围，提高打包速度
exclude: /node_modules/
}html模板生成
//通过 npm 安装 webpack.config.js头部添加
const HtmlWebpackPlugin = require('html-webpack-plugin');
//插件添加
plugin: [
// 通过new一下这个类来使用插件
new HtmlWebpackPlugin({
// 用哪个html作为模板
// 在src目录下创建一个index.html页面当做模板来用
template: './src/index.html',
hash: true // 会在打包好的bundle.js后面加上hash串
})
]
复制静态资源
yarn add copy-webpack-plugin -D添加插件配置
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, 'public/static'),
to: path.resolve(__dirname, 'dist/static'),
ignore: ['.*']
}
])webpack.base.conf.js
// webpack.base.conf.js
const path = require('path');
const APP_PATH = path.resolve(__dirname, '../src');
const DIST_PATH = path.resolve(__dirname, '../dist');
module.exports = {
entry: {
app: ['./src/index.js'],
},
output: {
// filename: 'js/[name].[hash].js', //使用hash进行标记,
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].js',
path: DIST_PATH,
},
module: {
rules: [
{
test: /\.js|jsx$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader', // 将 JS 字符串生成为 style 节点
},
{
loader: 'css-loader', // 将 CSS 转化成 CommonJS 模块
},
{
loader: 'sass-loader', // 将 Sass 编译成 CSS
},
],
},
{
// 使用css配置
test: /\.css$/,
loader: 'style-loader!css-loader',
},
{
// 使用less配置
test: /\.less$/,
loader: 'style-loader!css-loader',
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'images/[hash].[ext]', // 所有图片在一个目录
},
},
],
},
],
},
};
webpack.dev.conf.js
const path = require('path');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const baseWebpackConfig = require('./webpack.base.conf.js');
module.exports = merge(baseWebpackConfig, {
mode: 'development',
output: {
filename: 'js/[name].[hash].js',
},
// 源错误检查
devtool: 'inline-source-map',
plugins: [
// 处理html
new HtmlWebpackPlugin({
template: 'public/index.html',
inject: 'body',
minify: {
html5: true,
},
hash: false,
}),
// 热更新
new webpack.HotModuleReplacementPlugin(),
],
// 热更新
devServer: {
port: '3200',
contentBase: path.join(__dirname, '../public'),
historyApiFallback: true,
hot: true, // 开启
https: false,
noInfo: true,
open: true,
proxy: {
// '/': {
// target: 'http://internal.api.pre.ucloudadmin.com',
// changeOrigin: true,
// secure: false,
// },
},
},
});webpack.prod.conf.js 文件
// webpack.prod.conf.js 文件
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const merge = require('webpack-merge'); // 合并配置
const webpack = require('webpack');
const baseWebpackConfig = require('./webpack.base.conf');
module.exports = merge(baseWebpackConfig, {
mode: 'production', // mode是webpack4新增的模式
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html',
title: 'Pareto', // 更改HTML的title的内容
favicon: 'public/favicon.ico',
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
},
}),
new CleanWebpackPlugin(['../dist'], { allowExternal: true }),
new BundleAnalyzerPlugin(),
new CopyWebpackPlugin([
{
from: 'public/index.css',
to: '../dist',
},
]),
],
optimization: {
// runtimeChunk: {
// name: "manifest"
// },
splitChunks: {
cacheGroups: {
commons: {
chunks: 'initial',
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
},
vendor: {
// 将第三方模块提取出来
test: /node_modules/,
chunks: 'initial',
name: 'vendor',
priority: 10, // 优先
enforce: true,
},
},
},
},
});
