webpack CommonsChunkPlugin 提取公共代码
2018-06-24 01:53:39来源:未知 阅读 ()
1、项目结构
2、部分代码
module.js
console.log('module.js');
index文件夹下的index.js
require('../module.js');
console.log('首页-index文件');
login文件夹下的index.js
require('../module.js');
console.log('登录页-index文件');
3、webpack.config.js
var htmlWebpackPlugin = require('html-webpack-plugin'); var webpack = require('webpack'); module.exports = { // entry: './src/app.js', entry: { 'login': ['./src/page/login/index.js'], 'index': ['./src/page/index/index.js'] }, output: { path: __dirname + '/dist', filename: 'js/[name].js' }, //将外部变量或者模块加载进来 externals: { 'jquery': 'window.jQuery' }, module: { loaders: [{ test: /\.js$/, //以下目录不处理 exclude: /node_modules/, //只处理以下目录 include: /src/, loader: "babel-loader", //配置的目标运行环境(environment)自动启用需要的 babel 插件 query: { presets: ['latest'] } }, //css 处理这一块 { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { //支持@important引入css importLoaders: 1 } }, { loader: 'postcss-loader', options: { plugins: function() { return [ //一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效 require('postcss-import')(), require("autoprefixer")({ "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"] }) ] } } } ] }, //less 处理这一块 { test: /\.less$/, use: ['style-loader', { loader: 'css-loader', options: { //支持@important引入css importLoaders: 1 } }, { loader: 'postcss-loader', options: { plugins: function() { return [ //一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效 require('postcss-import')(), require("autoprefixer")({ "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"] }) ] } } }, 'less-loader' ] }, //处理html模板 { test: /\.html$/, use: { loader: 'html-loader' } }, //处理图片 { test: /\.(png|jpg|gif|svg)$/i, loaders: [ //小于8k的图片编译为base64,大于10k的图片使用file-loader 'url-loader?limit=8192&name:img/[name]-[hash:5].[ext]', //图片压缩 'image-webpack-loader' ] } ] }, plugins: [ new htmlWebpackPlugin({ template: 'index.html', filename: 'index.html' }), // 独立通用模块到js/base.js new webpack.optimize.CommonsChunkPlugin({ //公共块的块名称 name: 'common', filename: 'js/base.js' }) ] }
4、测试
(1)webpack.config.js
// 独立通用模块到js/base.js new webpack.optimize.CommonsChunkPlugin({ //公共块的块名称 name: 'common' })
输出:
(2)
// 独立通用模块到js/base.js new webpack.optimize.CommonsChunkPlugin({ //公共块的块名称 name: 'common', //生成的文件名 filename: 'js/common.js' })
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:【】小技巧】CSS文字两端对齐
下一篇:如何实现两个文本框同时输入
- 转-webpack学习笔记--整体配置结构 2020-03-14
- webPack 4.0的零基础学习 2019-11-07
- WebPack引用Bootstrap 无法使用图标的结局方案 2019-01-15
- 前端常用技术概述--Less、typescript与webpack 2019-01-11
- webpack配置sass模块的加载 2018-10-26
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash