摘要:安装此过程没有难点,略过下载完成后可以通过和来查看是否安装成功以及版本后安装新建一个目录项目名称进入该项目,然后一路回车即可。
node.js安装
此过程没有难点,略过
下载完成后可以通过node -v和npm -v来查看是否安装成功以及版本后
webpack 安装新建一个目录(项目名称), 进入该项目,npm init, 然后一路回车即可。(会生成一个package.json文件)
在根目录下创建src目录,并在src目录下创建index.js文件
在项目的根目录下执行 npm install webpack webpack-cli --save-dev
npm install webpack-dev-server html-webpack-plugin --save-dev
webpack-dev-server是启动一个本地的服务,html-webpack-plugin是一个插件,用来使用html的模板
在根目录下创建webpack.dev.config.js文件
编辑package.json文件:
"scripts": {
"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
}
安装babel相关插件npm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev
在项目的根目录下创建.babelrc
{
"presets": ["es2015", "latest"], "plugins": []
}
修改webpack.dev.config.js 并运行
在webpack.dev.config.js种添加内容
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js",// 入口文件 output: { path: __dirname, filename: "./release/bundle.js" }, plugins: [ new HtmlWebpackPlugin({ template: "./index.html" }) ], devServer: { contentBase: path.join(__dirname,"./release"), //运行的目录 open: true, // 自动刷新浏览器 port: 9002 // 端口号 } }
现在就可以在src下的index.js中写es6代码啦
运行npm run dev; 可以看到会自动访问 localhost:9002
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/100600.html
摘要:前言最近打算把应用到项目中,但是如何在开发环境浏览器端直接运行已经发布一段时间了,现在大部分是在环境运行,或者通过编译之后运行。主要实现用户能够在浏览器上直接运行语法。 前言 最近打算把es6应用到项目中,但是如何在开发环境(浏览器端)直接运行es6?es6已经发布一段时间了,现在大部分是在node.js环境运行,或者通过babel编译之后运行。babel-browser主要实现用户能...
摘要:本质就是一个编译器,通过将源代码解析成抽象语法树将源代码的结果一系列转换生成目标代码的将目标代码的转换成代码。项目构建三开发环境本地服务器搭建源码下载地址参考资料入门阮一峰中文文档中文网 注:以下教程均在 windows 环境实现,使用其他操作系统的同学实践过程可能会有些出入。 在上一章 webpack 项目构建:(一)基本架构搭建 我们搭建了一个最基本的 webpack 项目,现...
摘要:更新日志更新完成静态页面原型修复使用的正确姿势更新添加静态页面更新添加使用方法请戳我主要作用就是在你开发环节在后端同学还未开发完成的情况下,提供一个。 底下评论说是标题党,或者是光扔个github地址上来的同学我就不说什么了。你们有看看仓库的提交记录么?我还没有吃撑到开个仓库去骗star.我的出发点就是每天更新一部分代码,教大家用我所提到的技术栈搭建一个blog,我的出发点就是这么简单...
摘要:官方推荐不写重复的配置,即把本地和生产环境共用的配置放到一个文件,然后通过进行合并我们可以看到,通过插件,将共用配置和开发的配置进行合并定义了全局变量这个插件是为了在我们允许后,自动打开页面,避免每次都手动打开。 之前只知道webpack很强大,但是一直没有深入学习过,这次从头看了一下教程,然后从0开始搭建了一个多入口网站的开发脚手架,期间遇到过很多问题,所以有心整理一下,希望能给大家...
摘要:官方推荐不写重复的配置,即把本地和生产环境共用的配置放到一个文件,然后通过进行合并我们可以看到,通过插件,将共用配置和开发的配置进行合并定义了全局变量这个插件是为了在我们允许后,自动打开页面,避免每次都手动打开。 之前只知道webpack很强大,但是一直没有深入学习过,这次从头看了一下教程,然后从0开始搭建了一个多入口网站的开发脚手架,期间遇到过很多问题,所以有心整理一下,希望能给大家...
阅读 2391·2021-11-19 09:40
阅读 3556·2021-10-12 10:12
阅读 1863·2021-09-22 15:04
阅读 2878·2021-09-02 09:53
阅读 739·2019-08-29 11:03
阅读 1099·2019-08-28 18:11
阅读 1707·2019-08-23 15:28
阅读 3553·2019-08-23 15:05