搭建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.js
destination 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’:
能够经由过程掷中缓存,以下降网络流量,使网站加载速率更快,
但是,假如我们在布置新版本时不变动资本的文件名,浏览器可能会以为它没有被更新,
就会运用它的缓存版本。因为缓存的存在,当你须要猎取新的代码时,就会显得很辣手。
关于缓存:看文档