webpack4实践指南(一)

2018-06-24 本文已影响27人夏知更

背景
厌倦了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项目，还需要继续深入学习。

webpack4实践指南(一)

猜你喜欢

热点阅读