摘要:学习实践第一天安装参考文档中文文档安装篇中文文档创建文件夹并且进入创建的文件夹初始化一个新的文件,使用跳过询问阶段。查看目录结构接下来按中文文档安装篇教程演练。中文文档对该实例的说明在此示例中,标签之间存在隐式依赖关系。
webpack学习实践第一天
By Ylise1.安装webpack
参考文档:
1.webpack中文文档安装篇
2.Lodash中文文档
1.创建文件夹 mkdir webpack-demo 并且进入创建的文件夹
mkdir webpack-demo && cd webpack-demo
2.初始化一个新的package.json文件,使用npm init -y跳过询问阶段。接下来使用国内镜像cnpm安装webpack脚手架(npm安装过慢,为了效率下面都使用国内镜像)。插播:
npm init
npm init 用来初始化生成一个新的 package.json 文件。它会向用户提问一系列问题,如果你觉得不用修改默认配置,一路回车就可以了。
如果使用了 -f(代表force)、-y(代表yes),则跳过提问阶段,直接生成一个新的 package.json 文件。
install 命令可以使用不同参数,指定所安装的模块属于哪一种性质的依赖关系,即出现在 packages.json 文件的哪一项中。–save:模块名将被添加到 dependencies,可以简化为参数-S.
–save-dev:模块名将被添加到 devDependencies,可以简化为参数-D。
$ npm init -y Wrote to D:webpackpackage.json: { "name": "webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
cnpm install webpack webpack-cli --save-dev
3.查看目录结构 ls -l
ls -l
4.接下来按webpack中文文档安装篇教程演练。在当前文件夹创建目录结构src、src/index.js和index.html,文件内容直接复制文档中的,最后按照文档修改package.json将包改为私有,移除入口,防止意外发布。
index.js:
function component() { var element = document.createElement("div"); // Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的 //输出=>Hello webpack,具体参考Lodash文档 element.innerHTML = _.join(["Hello", "webpack"], " "); return element; } document.body.appendChild(component());
index.html:
起步
package.json:
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "privete": true,//将包改为私有,移除入口,防止意外发布。"main": "index.js"(入口文件) "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.36.1", "webpack-cli": "^3.3.6" }, "dependencies": { "lodash": "^4.17.15" } }
5.示例问题说明。
webpack中文文档对该实例的说明:
在此示例中, -->