webpack入门篇一(大神请略过)
2018-11-07 本文已影响0人
91193a06abbd
1,开始之前你需要安装node环境(https://nodejs.org/en/) 开发工具vscode 或者webstorm要是webstorm不免费,我就选他了。
1.webpack的安装:(https://www.webpackjs.com/guides/)
1 新建webpackVue 目录,名字随意
cd 到当前目录下可以执行:
npm init -y
npm install webpack webpack-cli --save-dev
执行完之后目录如下:
图1手动创建以下目录:
图2index.html内容:
图3index.js 内容:
图4继续执行npx webpack 在浏览器打开index.html会看到Hello webpack 说明你配置成功了 。
webpack 从4以后就不需要配置文件了但是大多数的项目是比较复杂的,所以我们还需要创建一个webpack.config.js,
图5entry 代表着入口,
outout表示出口。
这里基本就是官网的例子了,我就想告诉大家webpack可以干什么,我们需要做什么,webpack 可以帮我们转化es6,scss sass 等等,我们不需要去考虑浏览器是否可以解析这些js的高级语法,这一切都是webpack 帮助我们完成。下一篇我会着重介绍webpack.config.js的配置。