webpack简易学习教程
1.为什么要用webpack?
模块化开发
代码压缩,合并,提取公共代码,
编译ES6,CoffeeScript;
Scss,Less等css预处理器
2.webpack简易入门
安装
npm isntall webpack -g
-
配置
webpack.config.js
,let path = require('path'); let webpack =require('webpack') module.exports = { entry: path.resolve(__dirname, 'app/index.js'), //入口文件,需要编译的文件 output: { //出口文件 filename: 'bundle.js',//编译后文件名 path: path.resolve(__dirname, 'build'),//存储地址 publicPath:'/assets/' //资源文件的指定目录 }, devServer:{ //热更新 inline:true, //inline热更新模式 port:9000, //自动启动端口 }, }
-
配置
package.json
:运行npm run build 启动编译模式和npm run start热更新模式。"scripts": { "build": "webpack", "start": "webpack-dev-server --open " //open自动打开视窗 },
ps
path.join([path1],[path2])
用于连接路径;path.resolve([from……],to)
将to
参数解析成绝对路径path.dirname(p)
返回路径中代表文件夹的部分