本文主要是记录webpack的简单入门操作，希望对刚入门的t同行有所帮助。
第一步：安装webpack；
//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack
//webpack4还需要安装webpac-cli
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
第二步：开始前准备；
新建一个文件夹，命名不能是webpack，我命名的是webpack_demo；然后打开cmd，初始化项目：npm init;完成后,文件夹内新建如下文件：
webpack.config.js的内容为：
module.exports = {
entry: __dirname + "/public/js/index.js", //已多次提及的唯一入口文件
output: {
path: __dirname + "/dist", //打包后的文件存放的地方
filename: "js/bundle.js" //打包后输出文件的文件名
},
devServer: {
// contentBase: "./public", //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true //实时刷新
}
}
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>Document</title>
</head>
<body>
<div id="root"></div>
<script src="js/bundle.js"></script>
</body>
</html>
public/index.js的内容为：
var header = require('./header')
var content = require('./content')
var footer = require('./footer')
document.getElementById('root').innerHTML = header + content + footer
public/footer.js,header.js,content.js的内容为：
module.exports = '<header>这是头部</header>'
module.exports = '<div class="content">这是正文</div>'
module.exports = '<footer>这是脚部</footer>'
第三步：尝试打包
在package.json文件中配置，如下：
在cmd输入，npm run server,成功打开浏览器;运行npm start,查看dist文件夹下是否有文件，有则打包成功。
第四步：使用loaders,Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。
一般常用的是进行js版本转译，css加载，图片加载等。
babel-loader
npm install --save-dev babel-core babel-loader babel-preset-env
在webpack.config.js中配置Babel的方法如下:
module.exports = {
entry: __dirname + "/public/js/index.js", //已多次提及的唯一入口文件
output: {
path: __dirname + "/dist", //打包后的文件存放的地方
filename: "js/bundle.js" //打包后输出文件的文件名
},
devServer: {
// contentBase: "./public", //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true //实时刷新
},
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env"
]
}
},
exclude: /node_modules/
}]
}
}
css-loader
npm install --save-dev style-loader css-loader
module.exports = {
entry: __dirname + "/public/js/index.js", //已多次提及的唯一入口文件
output: {
path: __dirname + "/dist", //打包后的文件存放的地方
filename: "js/bundle.js" //打包后输出文件的文件名
},
devServer: {
// contentBase: "./public", //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true //实时刷新
},
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env"
]
}
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}]
}
]
}
}
npm run server查看打包效果，css和js是打包在一个js文件中。
插件（Plugins） ：插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）继续上面的例子。
HtmlWebpackPlugin：这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。
安装：
npm install --save-dev html-webpack-plugin
1.public文件夹下创建一个index.html文件，和根目录下的index.html内容相同，只是不引入js;
2.webpack配置如下：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require("webpack")
module.exports = {
entry: __dirname + "/public/js/index.js", //已多次提及的唯一入口文件
output: {
path: __dirname + "/dist", //打包后的文件存放的地方
filename: "js/bundle.js" //打包后输出文件的文件名
},
devServer: {
// contentBase: "./public", //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true //实时刷新
},
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env"
]
}
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}]
}
]
},
plugins: [
new webpack.BannerPlugin('版权所有，翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/public/index.html" //new 一个这个插件的实例，并传入相关的参数
})
],
}
npm start可以看到dist文件夹下生成index.html；但是你可以看到css和js是打包至一个js文件中，这是不利于我们的代码维护的，因此需要将css和JS分离。
使用mini-css-extract-plugin：
安装
npm install mini-css-extract-plugin --save-dev
webpack.config.js内容：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const webpack = require("webpack")
module.exports = {
entry: __dirname + "/public/js/index.js", //已多次提及的唯一入口文件
output: {
path: __dirname + "/dist", //打包后的文件存放的地方
filename: "js/bundle.js" //打包后输出文件的文件名
},
devServer: {
// contentBase: "./public", //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true //实时刷新
},
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env"
]
}
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
},
plugins: [
new webpack.BannerPlugin('版权所有，翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/public/index.html" //new 一个这个插件的实例，并传入相关的参数
}),
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "css/[id].css"
})
],
}
npm start打包完，即可以看到打包出来的dist文件夹下js和css分离开来。
以上只是loader只是部分操作事例，还有关于url-loader,vue-loader等等。