webpack实战js(公共代码的分离)
2017-07-04 本文已影响161人
sunny519111
项目需求
在平时项目中，我们有时候很多公共的代码和第三方的代码需要处理，webpack提供给我们分离代码的功能功能，本篇文章主要讲解第三方代码和自身代码分离
使用的知识点
-
webpack.optimize.CommonsChunkPlugin()使用超过多次的文件统一打包生成文件
- 接受一个对象作为参数 name是一个字符串，names是一个数组
new webpack.optimize.CommonsChunkPlugin({ // name: 'vendor' names: ['vendor'] }),
-
html-webpack-plugin生成对应的html文件
- npm install --save-dev html-webpack-plugin 安装对应的依赖
- 通过webpack配置相应的插件使用
const HtmlWebpackPlugin = require('html-webpack-plugin') plugins: [ new HtmlWebpackPlugin({ title: 'demo' //新生成文件的title template: 'index.html' // 生成的模板来源 }) ]
开始相应的配置文件
-
目录结构
目录结构.png
- 安装相应的依赖
npm install --save jquery //第三方库
npm install --save-dev html-webpack-plugin // 生成html模板
npm install --save webpack // 安装webpack
- webpack.config.js webpack的配置文件
const path = require('path');
const webpack = require('webpack');
const HtmlWebpckPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './app/index.js',
vendor: 'jquery' //第三方库的分离
},
output: {
path: path.resolve(__dirname,'./dist'),
filename: '[name]-[chunkHash:3].js' //添加chunkHash值
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
// name: 'vendor'
names: ['vendor']
}),
new HtmlWebpckPlugin({
title: 'demo', //生成的html文件的标题
template: 'index.html' // 模板文件
})
]
}
- 相应的配置文件
// app下面的index.js(入口文件)
const $ = require('jquery');
$('.hh').html('This is a webpack')
// 根目录下面的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<div class="hh">dddd</div>
<div class="hh1">cccc</div>
</body>
</html>
- 导出文件
- 运行 webpack
webpack --config webpack.config.js -
生成的导出目录
导出目录.png
-
生成的效果图（打开dist下面的html文件）
生成后的html.png
- 拓展
在导出的文件控制台，我们不能使用jquery，只能在文件模块之间使用jquery。
生成的文件控制台
我们想平常引用jquery那样可以在控制台控制元素，则需要使用expose-loader
- npm install --save-dev expose-loader
- 把配置文件webpack.config.js里面的修改下
entry: { main: './app/index.js', vendor: ['expose-loader?$!jquery'] // vendor: 'jquery' },
修改entry.png
