一、概念
首先我们要理解什么是webpack 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。由浏览器加载
重点是了解四个核心概念:输入,输出,加载程序和插件
二、安装
全局安装:
npm install webpack webpack-cli webpack-dev-server –g
依赖安装:
npm install webpack webpack-cli webpack-dev-server --save-dev
三、创建
Js模块创建,模块化开发-模块接收暴露
这里需要知道的是:(es5和es6写法上的不同)
eg:
a.Js 暴露模块 module.exports=obj; || export default obj;
b.Js 接收模块,设置html需要功能 require(‘./xx.js) || import obj from ‘./xx.js’
打包输出文件
webpack 输入文件.js -o 输出文件.js --mode development (开发环境build)
webpack main.js -o output.js --mode production(生产环境build)
四、基本配置
webpack.config.js
var path = require('path');
module.exports = {
mode: 'development', //开发模式
entry: './main.js', //入口文件
output: { //出口文件
path: path.resolve(__dirname, 'dist'), //路径
filename: 'output.js' //名字
}};
配置好后终端输入webpack运行
再安装一下热更新省事 热更新:npm install webpack-dev-server –g
var path = require('path');
module.exports = {
//...
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}};
运行终端命令webpack-dev-server --hot --line完成自动刷新
如果默认端口被占用,改端口webpack-dev-server --port 3000 (将默认端口改成3000) 运行命令更改:在package.json中scripts添加:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "npm run dev",
"dev":"webpack-dev-server"
},
则npm start运行
剩余css、img、js、es6、ts的loader自寻查找webpack官网
www.webpackjs.com