webpack 环境搭建
Webpack环境搭建
一、安装node
1、node官网下载node并安装----node里面内置了npm所以用在安装npm了
2、命令行输入node -v查看node是否安装成功
二、全局安装webpack
1、命令行运行: npm install webpack -g
2、目的:全局使用webpack 命令
三、搭建项目
1、在项目根目录项安装npm install webpack --save-dev安装到项目依赖中
2、运行npm init -y 初始化项目
3、搭建项目目录,根目录创建src文件夹和dist文件夹,src里面放打包前的文件{images、js、css、index.html、mian.js},dist中放打包后的文件。
4、根目录下创建webpack.config.js文件,用于打包配置:
-----------------------------------------------------------------------------------------------------------------
const path=require('path');//引进path模块
var htmlwebpackPlugin=require('html-webpack-plugin');//引进配置插件
module.exports={
mode:"development",//取消打包下黄色字体
entry:'./src/main.js',//项目入口
output:{//项目出口
path:path.resolve(__dirname,"dist"),//打包后文件路径
filename:"bundle.js"//打包后文件名称
},
//运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
plugins:[ //插件
new htmlwebpackPlugin({
template:path.resolve(__dirname,'src/index.html'),//模板index.html路径
filename:'index.html'//打包后名称
})
],
//运行cnpm i style-loader css-loader --save-dev安装到开发依赖
module:{ //打包css文件
rules:[
{
test:/\.css$/,//文件为css
use:[//配置loader
"style-loader",
"css-loader"
]
}
]
},
}
5、执行webpack命令打包
四、实现webpack实时打包构建
1、由于每次重新修改代码之后,都需要手动运行webpack打包的命令,比较麻烦,所以使用webpack-dev-server来实现代码实时打包编译,当修改代码之后,会自动进行打包构建。
2、运行cnpm i webpack-dev-server --save-dev安装到开发依赖
3、如果只有本地安装了webpack-dev-server ,打包时运行webpack-dev-server 会报错“不是内部会外部命令”。两种方法:
(1) 全局安装运行npm install webpack-dev-server -g ,能够使用在全局命 令行运行webpack-dev-server 。
(2) 在package.json文件中的指令,来进行运行webpack-dev-server命令,在 scripts节点下新增"dev": "webpack-dev-server"指令,在命令行执行npm run dev 。
4、在打的包后发现没有生成打包文件,实际上打包文件是存放在内存的,根据提示输入Y,开启本地服务,在http://localhost:8080/ 中可以看到打包index执行后的效果。
五、安装插件
1、使用--contentBase指令的过程比较繁琐,需要指定启动的目录,同时还需要修改index.html中script标签的src属性,所以推荐用html-webpack-plugin插件配置启动页面.
2、运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
3、webpack.config.js配置文件如下实例代码。
六、使用webpack打包css文件
1、运行cnpm i style-loader css-loader --save-dev
2、修改webpack.config.js这个配置文件:
详情使用webpack打包less、sass等类似请查看官网。https://www.webpackjs.com/
最新文章
- SQL Server T-SQL高级查询
- WF4与MVC结合示例
- Windows Server 2003开机自动启动MySQL服务设置方法
- python Django 学习笔记(一)—— Django安装
- winform窗体间利用委托传值(一)
- FontAwesome 奥森图标的学习
- ARC __bridge modifiers demystified
- PNG图片小结
- sitemap.xml 的 几个东西
- web前段2017.6.8
- IOC容器在web容器中初始化——(一)两种配置方式
- ArcGIS API for JavaScript 4.2学习笔记[7] 鹰眼(缩略图的实现及异步处理、Promise、回调函数、监听的笔记)
- 关于字符latin capital letter sharp s ";ß";( U+1E9E)显示的问题
- AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除
- Git源代码管理
- vue-cli关闭eslint及配置eslint
- AS 常用快捷键
- element-ui 带单选框的表格
- k8s官方安装版本
- TCP Server有两个套接字