webpack开始一个项目的步骤
这几天在学习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开始一个项目的步骤的更多相关文章
- Vue+webpack构建一个项目
1.安装CLI命令的工具 推荐用淘宝的镜像 npm install -g @vue/cli @vue/cli-init 2.使用命令构建一个名为myapp的项目 vue init webpack m ...
- Webpack入门——使用Webpack打包Angular项目的一个例子
2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...
- 一步步从零开始用 webpack 搭建一个大型项目
开篇 很多人都或多或少使用过 webpack,但是很少有人能够系统的学习 webpack 配置,遇到错误的时候就会一脸懵,不知道从哪查起?性能优化时也不知道能做什么,网上的优化教程是不是符合自己的项目 ...
- webpack构建vue项目(配置篇)
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境
通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...
- webpack搭建vue项目,实现脚手架功能
本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思 ...
- Vue2+Webpack创建vue项目
相比较AngularJS和ReactJS,VueJS一直以轻量级,易上手称道.MVVM的开发模式也使前端从原先的DOM中解放出来,我们在不需要在维护视图和数据的统一上花大量时间,只需要关注于data的 ...
- vue+webpack多个项目共用组件动态打包单个项目
原文复制:https://www.jianshu.com/p/fa19a07b1496 修改了一些东西,因为sh脚本不能再window电脑执行,所以改成了node脚本.这是基于vue-cli2.0配置 ...
- Webpack+Vue构建项目
第一步:单纯的搭建出来我们的项目,并且通过webpack打包一个bundle.js然后运行起来 步骤: 1.建立项目必要的文件和文件夹(见截图) 2.配置webpack.develop.config. ...
随机推荐
- Linux上安装Apache服务器
http://httpd.apache.org/download.cgi httpd-2.4.29.tar.gz #创建httpd用户 groupadd httpd useradd -g httpd ...
- HTML5元素拖放设置总结
将元素图片放入div盒子内 1.首先设置元素为可拖放:在img标签内加入draggable=”true”. <img draggable="true"> 2.设置元素的 ...
- jsp学习与提高(一)——JSP生命周期、三大指令及动作
1.jsp定义: 1.1以java语言为脚本语言,运行在服务端的程序: 1.2处理客户请求,生成页面 1.3其本质是个sevlet会生成.java文件编译后再生成.class文件 2.jsp生命周期( ...
- TensorFlow高层封装:从入门到喷这本书
目录 TensorFlow高层封装:从入门到喷这本书 0. 写在前面 1. TensorFlow高层封装总览 2. Keras介绍 2.1 Keras基本用法 2.2 Keras高级用法 3. Est ...
- mysql--浅谈多表查询1
这是对自己学习燕十八老师mysql教程的总结,非常感谢燕十八老师. 依赖软件:mysql5.6 系统环境:win 连接查询 在谈连接查询之前我们需要对数学上的笛卡尔积有一定的了解 现在有两个集合m和n ...
- Testlink设置
1. Testlink配置修改 1.1. config.inc.php 1.1.1. 日志路径配置 /** * @var string Path to store logs - *for securi ...
- java Integer
Java 中的数据类型分为基本数据类型和引用数据类型 int是基本数据类型,Integer是引用数据类型: Ingeter是int的包装类,int的初值为0,Ingeter的初值为null. 初始化 ...
- PM2自动发布本地项目到服务器
(一)开发环境 本地服务器 Ubunt14.04 远程服务器Ubuntu16.04 发布软件PM 2 (二)发布介绍 本地和我们的远程服务器,必须都安装有git,pm2,以及nodejs环境.实际上配 ...
- 网络编程之异步IO,rabbitMQ笔记
对于网络并发编程而言,多线程与多进程算是最常见的需求场景了.毕竟网站开放就是想要更多的流量访问的. 回顾 回顾下之前学过的关于线程,进程和协程的知识点 IO密集型任务--用多线程更好计算密集型任务-- ...
- [USACO07JAN]平衡的阵容Balanced Lineup
[USACO07JAN]平衡的阵容Balanced Lineup 题目描述 For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000) a ...