-
背景
厌倦了vue-cli这种安装好就能用的脚手架，决定开始实践webpack，此文记录如何自己搭建项目架构。 -
起步之初
由于刚换了unbuntu系统，所以安装的node和webpack是当前最新版本，webpack4.12.0（因为新版与旧版之间还是存在差异）
创建一个webpack项目需要做的基本操作：
mkdir folder && cd folder
npm init -y
npm install webpack --save-dev
为了能在浏览器看见项目的启动效果，我们需要展示的页面，按webpack官网教程手动创建必要的文件：
index.html
index.js
注意：
- 这里的lodash是通过import引入，所以需要命令行先安装；
- 使用webpack打包，直接在终端输入webpack，但这里会报错，因为webpack4.12.0中webpack和webpack-cli已经分离，需要单独安装webpack-cli，需要全局安装，否则安装完运行webpack命令还是会提示安装webpack-cli才能使用；
- 网上的教程大多数是webpack以往的版本，新版本的很少提到，所以运行的命令还是webpack entry.js output.js，在webpack新版本中已经不需要输入打包后的输入文件，webpack默认打包到 ./dist/main.js ，命令行输入webpack后可跟多个文件名，都认为是需要打包的文件；一切标准以官网为准。
此时，就可以直接在编辑器打开网页，在浏览器中看见的效果图：
浏览器打开
考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式，在package.json中添加一个npm脚本：
"build":"webpack"
在终端运行下面命令中任意一个都可以：
webpack
//or
npm run build
运行命令
现在从编辑器直接打开页面，就可以看见相应的页面：
i在浏览器打开页面
- 搭建Web服务器
我们搭建了简单的webpack环境，可以用来打包文件，现在我们不想在本地打开，要向以前使用脚手架一样在服务器打开，此时我们需要自己搭建Web服务器。
在webpack中使用webpack-dev-server，首先安装：
npm install --save-dev webpack-dev-server
在package.json中添加：
"start": "webpack-dev-server --open"
webpack-dev-server提供了一个简单的web服务器，并且能够实时重新加载，但我们需要为它做一些配置，以便于告诉服务器，在哪里查找文件。
新建webpack.config.js文件，首先做基础配置：
const path = require('path');
module.exports = {
entry:'./src/index.js',
output: {
filename: "main.js",
path: path.resolve(__dirname,'dist')
}
};
然后为webpack-dev-server配置访问文件的入口：
devServer: {
contentBase:'./dist'
},
以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。
然后我们运行脚本，在浏览器看一下启动效果：
启动web服务器
此时又出现了新的问题，在web服务器上访问的文件只有dist，我们要如何才能看见像之前一样的页面呢？
- 生成html模板
为了能在服务器上访问，我们需要生成html模板，借助html-webpack-plugin插件。
npm install --save-dev html-webpack-plugin
在webpack.config.js文件下添加配置：
const htmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new htmlWebpackPlugin(),
new htmlWebpackPlugin({
filename:"index.html",
template:"index.html"
})
],
然后npm run start在浏览器打开的效果：
生成htm模板后
现在基本上已经达到了最基础的效果，如果想要扩展成为一个配置完整的webpack项目，还需要继续深入学习。
网友评论