Webpack 入门；构建项目,脚手架

1. 选择一个文件夹： D:/usr/webpack/demo01，并且在该目录下创建一个package.json 空白文件

demo
|- package.json

2. 打开vscode：

3. 进入终端执行：

npm init

4. 在当前文件夹下创建文件目录：

demo
|- package.json
|- /dist|- index.html
|- /src|- index.js

5. 安装webpack

npm install webpack -g //如果已经全局安装过，忽略此条命令npm install webpack --save-devnpm install webpack-cli --save-dev

6. 创建一个webpack.config.json 文件

//提供目录
const path = require('path');//
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')}
};

7. 配置 package.json 文件，设置webpack的npm 启动方式；配置："build":"webpack"

{"name": "demo01","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack",},"author": "Jon","license": "ISC","devDependencies": {"lodash": "^4.17.11","webpack": "^4.20.2","webpack-cli": "^3.1.1"},}

8. 配置服务启动方式:

npm install --save-dev webpack-dev-server

9. 在 package.json中加入：

"start": "webpack-dev-server --open"

10. 在webpack.json中加入

//提供目录
const path = require('path');//
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},devServer: {contentBase: './dist'}
};

11. 打包运行

npm start //运行npm run build //打包

12. 最终配置：

/* package.json */{"name": "demo01","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","start": "webpack-dev-server --open"},"author": "Jon","license": "ISC","devDependencies": {"lodash": "^4.17.11","webpack": "^4.20.2","webpack-cli": "^3.1.1","webpack-dev-server": "^3.1.9"},"dependencies": {"lodash": "^4.17.11"}
}// webpack.config.jsonconst path = require('path');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},devServer: {contentBase: './dist'}
};

Webpack 入门；构建项目,脚手架相关推荐

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（一）基础知识概述
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述前言 2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟 ...
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（十一）阶段性小结
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十一)阶段性小结前情回顾去年写的那一套东西,虽然我也写得非常的认真,但是其中还是有点绕了.当时水平不行.现在 ...
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（二）安装 nodejs 环境以及 vue-cli 构建初始项目
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目在上一篇<Vue2+VueRouter2+ ...
webpack快速构建项目
1.前(fei)言(hua) webpack是什么我在这里就不多说了,实在不知道的可以直接在去搜一下,都一大堆答案.关于用webpack怎么构建项目,方法也是多种多样,五花八门.今天,我就写下我平常构 ...
webpack入门——构建简易版vue-cli
用vue-cli1/2搭建一个vue项目时,可以看到有很多关于webpack配置的文件.我们不需要知道那些繁琐的配置文件有什么作用,只需在控制台输入npm run dev,项目自动启动,我们就可以愉快 ...
【开源项目】SpringCloud 快速构建项目脚手架工程（持续更新）
一.项目地址 https://gitee.com/smile-coding/springcloud-quick-start 二.项目说明本项目旨在提供一个快速构建微服务的脚手架工程,不掺杂任何的复杂 ...
Java中如何快速构建项目脚手架
文章目录 1 前言 2 微服务项目准备 3 脚手架构建 3.1 项目正常启动 && 测试用例正常 3.2 在项目的根pom中加入以下maven插件配置 3.3 执行archetype插 ...
使用 .NET CLI 构建项目脚手架
前言在微服务场景中,开发人员分配到不同的小组,系统会拆分为很多个微服务,有一点是,每个项目都需要单元测试,接口文档,WebAPI接口等,创建新项目这些都是重复的工作,而且还要保证各个项目结构的大体一 ...
Vue2+VueRouter2+webpack 构建项目实战（二）目录以及文件结构
Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构 2017年8月补充 2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在 ...

Webpack 入门；构建项目,脚手架

Webpack 入门；构建项目,脚手架相关推荐

最新文章

热门文章