前端优化工具 webpack4的使用

创建时间：2018-04-25

首先需要安装node.js

因为 webpack是基于npm包的方式存在

检查node.js

node --version

检查npm

npm --version

新建项目文件夹，比如 app

通过cmd定位到该目录

对该项目进行初始化

npm init -y

此时我们的项目文件夹里就多了一个文件：package.json

安装webpack

webpack install webpack --save-dev

此时我们的项目文件夹，已经又多了一个文件夹和一个json文件：

安装webpack-cli

npm install -d webpack-cli

现在可以开始写自己的项目了

建立如下文件：

编辑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>
    <script src='./dist/main.js'></script></body></html>

编辑 dev.js

console.log("我是分支");

编辑index.js

require('./dev.js');console.log('我是index');

运行webpack进行js文件打包

.\node_modules\.bin\webpack --mode development

此时项目结构如下

如需压缩就要更换为如下指令：

.\node_modules\.bin\webpack --mode production

上一篇：设置php脚本允许跨域访问以及返回JSON数据

下一篇：点击按钮滑动到指定的元素