这几天在学习Vue  用到了webpack打包工具  开始一个项目的时候  需要配置很多项  刚开始写的时候  配置文件总是缺什么再去配置什么  创建项目就用了半个小时  后来觉得应该有个步骤  这样才知道下一步该干什么  提高效率  所以把webpack开始一个新工程的步骤总结一下  以后忘了可以按照这个来

1  创建空文件夹

2  执行 npm init -y

3  创建基本目录

|webpack.config.js(文件)
|.babelrc(文件)
|dist(目录)
|src(目录)
|index.html(文件)
|main.js(文件)
|css(目录)
|index.css(文件)

4  执行

npm i webpack webpack-cli webpack-dev-server -D
npm i html-webpack-plugin -D

安装需要的依赖

5 安装css的loader

npm i style-loader css-loader -D

6  配置webpack.config.js文件

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin') module.exports = {
entry:{path:path.join(__dirname,'./src/main.js')},
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
},
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']}
]
},
plugins:[
new htmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html'
})
]
}

7  执行

npm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D

安装babel 和语法库   并配置根目录下的.babelrc文件

npm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D

8  在package.json文件的script节点中加入命令

"dev": "webpack-dev-server --open --port 3000 --contentBase src --mode=development --hot"

9  控制台运行   npm run dev   查看浏览器

webpack开始一个项目的步骤的更多相关文章

  1. Vue+webpack构建一个项目

    1.安装CLI命令的工具  推荐用淘宝的镜像 npm install -g @vue/cli @vue/cli-init 2.使用命令构建一个名为myapp的项目 vue init webpack m ...

  2. Webpack入门——使用Webpack打包Angular项目的一个例子

    2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...

  3. 一步步从零开始用 webpack 搭建一个大型项目

    开篇 很多人都或多或少使用过 webpack,但是很少有人能够系统的学习 webpack 配置,遇到错误的时候就会一脸懵,不知道从哪查起?性能优化时也不知道能做什么,网上的优化教程是不是符合自己的项目 ...

  4. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  5. (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

    通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...

  6. webpack搭建vue项目,实现脚手架功能

    本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思 ...

  7. Vue2+Webpack创建vue项目

    相比较AngularJS和ReactJS,VueJS一直以轻量级,易上手称道.MVVM的开发模式也使前端从原先的DOM中解放出来,我们在不需要在维护视图和数据的统一上花大量时间,只需要关注于data的 ...

  8. vue+webpack多个项目共用组件动态打包单个项目

    原文复制:https://www.jianshu.com/p/fa19a07b1496 修改了一些东西,因为sh脚本不能再window电脑执行,所以改成了node脚本.这是基于vue-cli2.0配置 ...

  9. Webpack+Vue构建项目

    第一步:单纯的搭建出来我们的项目,并且通过webpack打包一个bundle.js然后运行起来 步骤: 1.建立项目必要的文件和文件夹(见截图) 2.配置webpack.develop.config. ...

随机推荐

  1. IntelliJ IDEA 安装golang 插件

    作者的机器为mac OS 用户首先需要在自己的个人机器上安装好 golang 的环境,详细可以参考  hyperledger fabric 1.0.5 分布式部署 (一)安装 golang 的部分. ...

  2. Unity 关于时间

    一.引言 本篇博客 包括:unity中帧的耗时,时间缩放比例,常用日期时间的获取和计算,测试一段程序的耗时. 二.帧时间 名称 描述 Time.time (只读)表示从游戏开发到现在的时间,会随着游戏 ...

  3. Codeforces Round #433 (Div. 2, based on Olympiad of Metropolises) B

    Maxim wants to buy an apartment in a new house at Line Avenue of Metropolis. The house has n apartme ...

  4. Serilog 是 ASP.NET Core 的一个插件,可以简化日志记录

    [翻译] ASP.NET Core 利用 Docker.ElasticSearch.Kibana 来记录日志 原文: Logging with ElasticSearch, Kibana, ASP.N ...

  5. Linux .Net Core

    Linux .Net Core自宿主应用程序瘦身记 一,.NET Core 自宿主应用程序个头有点大 发布.NET Core应用程序有两个方式,一种是“便携式”,一种是“自宿主式”.便携式发布时,目标 ...

  6. (转)Linxu磁盘体系知识介绍及磁盘介绍

    Linxu磁盘体系知识介绍及磁盘介绍 系统管理 / 2017-01-14 / 0 条评论 / 浴春风 Linu磁盘设备基础知识指南磁盘速度快具备的条件: 1)主轴的转速5400/7200/10000/ ...

  7. css3的animation动画

    animation 设置对象的动画特效   有6个主要的值 animation-name   动画名称 animation-duration   动画持续时间 animation-timing-fun ...

  8. Linux 网卡驱动的安装

    一.网卡驱动安装的一般思路 1.首先从硬 件安装,检查网卡本身故障 2.检查网卡芯片型号(注意不是硬件品牌) 常见的网卡芯片有Intel RC82545EM/Realtek 8139D/ Broadc ...

  9. 'gets' undeclared here (not in a function)

    原文:http://www.cnblogs.com/hjj801006/p/3988220.html 1.在命令行输入:find -name stdio.in.h.查到有两个文件中含有stdio.in ...

  10. EasyUI Tabs + Yii2.0实现iframe方式打开页面(解决共用静态文件引入加载的问题)

    在项目实际开发中,有将打开的各个链接页面隔离的需求(防止静态资源起冲突),这个时候常规思路就是使用iframe来实现!但遇到一个比较棘手的问题,当用easyui Tabs打开一个iframe页面时,怎 ...