手动搭建一个webpack项目

884 阅读1分钟

一、概念

首先我们要理解什么是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