webpack从零开始搭建多页面(一):webpack起步到运行一个简单的demo
搭建webpack_demo1项目,使其运行起来
webpack的强大就不介绍了,我们直接动手做起来,我们从零开始一步步搭建一个多页面的系统,多参考webpack中文文档
cmd命令:
mkdir webpack_demo1 #创建文件夹 cd webpack_demo1 #进入文件夹 npm install -g webpack #全局安装webpack npm init #初始化 npm install --save-dev webpack #安装webpack包
可以安装淘宝镜像 $ npm install -g cnpm --registry=https://registry.npm.taobao.org 上面的npm就可以写成cnpm
demo1的目录:
|——node_modules ├─dist # 打包后的文件 | ├─greeter.js #就放了一句话 | |──main.js #入口文件 ├─src #当前项目的源码 | ├─greeter.js #就放了一句话 | |──main.js #入口文件 |——webpack.config.js #webpack配置文件 |——package.json #依赖包
1、建项目目录并完成第一次打包
进入上我们建立的webpack_demo1目录,建立两个文件夹,分别是src文件夹和dist文件夹:src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块。 dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件。 可以理解成src是源码文件,dist是我们编译打包好的文件;一个用于开发环境,一个用于生产环境。在dist文件下手动建立一个index.html文件,并写入下面的代码。
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack_demo1</title> </head> <body> <div id="root"></div> <script src="./bundle.js"></script> </body> </html>在src文件夹下建立main.js和greeter.js,编写我们的JavaScript代码,main.js是我们的入口文件。
在main.js文件里写: const greeter=require('./greeter.js'); document.getElementById('root').innerHTML = greeter(); 在greeter.js文件里写: module.export = function(){ return '第一个webpack demo'; };
- 第一次打包
在终端下 写命令:webpack "entry file" "destination for bundled file"
entery file: 入口文件的路径,这里就是src/main.jsdestination for bundled file: 填写打包后存放的路径,这里就是dist/bundle.js
所以终端写:webpack src/entry.js dist/bundle.js(webpack非全局安装执行:node_modules/.bin/webpack src/main.js dist/bundle.js)
成功后,在dist文件夹下会出现一个bundle.js
2、通过配置文件来使用Webpack打包
在根目录下新建一个名为webpack.config.js的文件,标准的webpack配置模板: module.exports={ entry:{}, //配置入口文件的地址,可以是单一入口,也可以是多入口。 output:{}, //配置出口文件的地址,在webpack2.X版本后,支持多出口配置。 module:{},//配置模块:主要是解析CSS和图片转换压缩等功能。 plugins:[],//配置插件,用于生产模版和各项功能 devServer:{} //配置webpack开发服务功能 }我们在其中写入如下所示的简单配置代码: 入口文件路径/打包后文件的存放路径:
const webpack = require('webpack'); const path = require('path'); module.exports = { entry: __dirname + "/src/main.js",//已多次提及的唯一入口文件 output: { path: __dirname + "/dist",//打包后的文件存放的地方 filename: "bundle.js"//打包后输出文件的文件名 }, module:{}, plugins:[], devServer:{} }; //__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。
- 第二次打包 (先删掉dist中已有的bundle.js)
在终端下 写命令:webpack(wepack非全局安装执行:node_modules/.bin/webpack)
成功后,在dist文件夹下会出现一个bundle.js
3、更快捷的执行打包
在命令行中输入命令"node_modules/.bin/webpack"这样的操作是比较烦人的,不过值得庆幸的是npm可以引导任务执行,
对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令:
在package.json中对scripts对象添加一条下命令:"start": "wepack"
注意:package.json中的script会安装一定顺序寻找命令对应位置,本地的node_modules/.bin路径就在这个寻找清单中,所以无论是全局还是局部安装的Webpack,都不需要写前面那指明详细的路径了。
- 第三次打包:(先删掉dist中已有的bundle.js)
在命令行中输入:npm start
成功后,在dist文件夹下会出现一个bundle.js
使用webpack构建本地服务器
让浏览器监听你的代码的修改,并自动刷新显示修改后的结果: 在终端输入:npm install --save-dev webpack-dev-server 在package.json中对scripts对象添加一条下命令用以开启本地服务器: "server": "webpack-dev-server --open"
在webpack.config.js中添加devServer:
devServer:{ contentBase:path.resolve(__dirname,'dist'), //设置基本目录结构,本地服务器所加载的页面所在的目录 host:'localhost',//服务器的IP地址,可以使用IP也可以使用localhost inline: true,//实时刷新 compress:true,//服务端压缩是否开启,一般设置为开启, historyApiFallback: true,//不跳转 port:1818 //配置服务端口号,建议不使用80,很容易被占用,这里使用了1818 }
在页面上已经可以看到一句话了" 第一个webpack demo ";
关于入口和出口配置的写法及其解释
entry入口:
单入口有以下写法: entry: __dirname + "/src/main.js", entry: './src/main.js', 多入口有以下写法: entry:{ index: './src/main.js', selectList:'./src/***.js' },
output出口:
output: { path: __dirname + "/dist",//打包后的文件存放的地方 // path:path.resolve(__dirname,'dist'), filename: "bundle.js"//打包后输出文件的文件名 //filename:'[name].js' // filename:'js/[name].js' // filename:'js/[name].bundle-[chunkhash:8].js' }, filename: "[name].js" filename: "[name]-[hash].js" 打包文件名: main.js main-6672c04f6c9672410a61.js filename:'js/[name].js': 打包目录是:|——dist | |——js | | |——main.js filename:'js/[name].bundle-[chunkhash:8].js' : 打包目录是:|——dist | |——js | | |——main.bundle-d0dea2df.js [name]:是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个文件。 [chunkhash:8]: 数字和字母组成的8位哈希值 __dirname:是node.js中的一个全局变量,它指向当前执行脚本所在的目录,打印出来是:\webpack\webpack_demo1 path:使用Node内置的path模块,并在它前面加上__dirname这个全局变量。 可以防止不同操作系统之间的文件路径问题,并且可以使用相对路径按照预期工作。建议使用:filename:'js/[name].bundle-[chunkhash:8].js':
可以通过命中缓存,以降低网络流量,使网站加载速度更快, 然而,如果我们在部署新版本时不更改资源的文件名,浏览器可能会认为它没有被更新, 就会使用它的缓存版本。由于缓存的存在,当你需要获取新的代码时,就会显得很棘手。
关于缓存:看文档