1、webpack.config.js配置文件为:

//处理共用、通用的js
var webpack = require('webpack');
//处理html模板
var htmlWebpackPlugin = require('html-webpack-plugin');
//css单独打包
var ExtractTextPlugin = require("extract-text-webpack-plugin");// 获取html-webpack-plugin参数的方法
var getHtmlConfig = function(name, title) {return {//本地模板文件的位置template: './src/view/' + name + '.html',//输出文件的目录和文件名称filename: 'view/' + name + '.html',//添加特定favicon路径到输出的html文档中favicon: './favicon.ico',//生成的html文档的标题
        title: title,//向template或者templateContent中注入所有静态资源,不同的配置值注入的位置不经相同。true或者body:所有JavaScript资源插入到body元素的底部inject: true,//是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值hash: true,//允许插入到模板中的一些chunk,不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时,每个页面注入的thunk应该是不相同的,需要通过该配置为不同页面注入不同的thunk;chunks: ['common', name]};
};var config = {//多页面配置
    entry: {//通用模块'common': ['./src/page/common/index.js'],//登录模块'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: [//编译ES6
            {test: /\.js$/,//以下目录不处理exclude: /node_modules/,//处理以下目录include: /src/,loader: "babel-loader?cacheDirectory",//配置的目标运行环境自动启用需要的 babel 插件
                query: {presets: ['latest']}},//处理css
            {test: /\.css$/,//css单独打包
                use: ExtractTextPlugin.extract({fallback: "style-loader",use: [{loader: 'css-loader',options: {//支持@important引入cssimportLoaders: 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(同理sass)
            {test: /\.less$/,//css单独打包
                use: ExtractTextPlugin.extract({fallback: "style-loader",use: [{loader: 'css-loader',options: {//支持@important引入cssimportLoaders: 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']})},//处理图片
            {test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/i,loaders: [//小于8k的图片编译为base64,大于10k的图片使用file-loader            'url-loader?limit=8192&name=img/[name]-[hash:5].[ext]',//图片压缩'image-webpack-loader']}]},plugins: [//html模板处理new htmlWebpackPlugin(getHtmlConfig('index', '首页')),new htmlWebpackPlugin(getHtmlConfig('login', '登录页')),//通用模块编译到js/common.jsnew webpack.optimize.CommonsChunkPlugin({//公共块的块名称name: 'common',//生成的文件名filename: 'js/common.js'}),//css单独打new ExtractTextPlugin('css/[name].css')]
}
module.exports = config;

2、package.json文件为:

{"name": "webpack","version": "1.0.0","main": "bundle.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"},"author": "","license": "ISC","devDependencies": {"autoprefixer": "^7.1.4","babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-preset-latest": "^6.24.1","css-loader": "^0.28.7","ejs-loader": "^0.3.0","extract-text-webpack-plugin": "^3.0.0","file-loader": "^0.11.2","html-loader": "^0.5.1","html-webpack-plugin": "^2.30.1","image-webpack-loader": "^3.4.2","less": "^2.7.2","less-loader": "^4.0.5","postcss-import": "^10.0.0","postcss-loader": "^2.0.6","style-loader": "^0.18.2","url-loader": "^0.5.9","webpack": "^3.5.6","webpack-dev-server": "^2.8.2"},"dependencies": {"acorn": "^5.1.2","acorn-dynamic-import": "^2.0.2","ajv": "^5.2.2","ajv-keywords": "^2.1.0","align-text": "^0.1.4","ansi-regex": "^3.0.0","anymatch": "^1.3.2","arr-diff": "^2.0.0","arr-flatten": "^1.1.0","array-unique": "^0.2.1","asn1.js": "^4.9.1","assert": "^1.4.1","async": "^2.5.0","async-each": "^1.0.1","balanced-match": "^1.0.0","base64-js": "^1.2.1","big.js": "^3.1.3","binary-extensions": "^1.10.0","bn.js": "^4.11.8","brace-expansion": "^1.1.8","braces": "^1.8.5","brorand": "^1.1.0","browserify-aes": "^1.0.8","browserify-cipher": "^1.0.0","browserify-des": "^1.0.0","browserify-rsa": "^4.0.1","browserify-sign": "^4.0.4","browserify-zlib": "^0.1.4","buffer": "^4.9.1","buffer-xor": "^1.0.3","builtin-modules": "^1.1.1","builtin-status-codes": "^3.0.0","camelcase": "^4.1.0","center-align": "^0.1.3","chokidar": "^1.7.0","cipher-base": "^1.0.4","cliui": "^3.2.0","co": "^4.6.0","code-point-at": "^1.1.0","concat-map": "^0.0.1","console-browserify": "^1.1.0","constants-browserify": "^1.0.0","core-util-is": "^1.0.2","create-ecdh": "^4.0.0","create-hash": "^1.1.3","create-hmac": "^1.1.6","cross-spawn": "^5.1.0","crypto-browserify": "^3.11.1","d": "^1.0.0","date-now": "^0.1.4","decamelize": "^1.2.0","des.js": "^1.0.0","diffie-hellman": "^5.0.2","domain-browser": "^1.1.7","elliptic": "^6.4.0","emojis-list": "^2.1.0","enhanced-resolve": "^3.4.1","errno": "^0.1.4","error-ex": "^1.3.1","es5-ext": "^0.10.30","es6-iterator": "^2.0.1","es6-map": "^0.1.5","es6-set": "^0.1.5","es6-symbol": "^3.1.1","es6-weak-map": "^2.0.2","escope": "^3.6.0","esrecurse": "^4.2.0","estraverse": "^4.2.0","event-emitter": "^0.3.5","events": "^1.1.1","evp_bytestokey": "^1.0.3","execa": "^0.7.0","expand-brackets": "^0.1.5","expand-range": "^1.8.2","extglob": "^0.3.2","fast-deep-equal": "^1.0.0","filename-regex": "^2.0.1","fill-range": "^2.2.3","find-up": "^2.1.0","for-in": "^1.0.2","for-own": "^0.1.5","fsevents": "^1.1.2","get-caller-file": "^1.0.2","get-stream": "^3.0.0","glob-base": "^0.3.0","glob-parent": "^2.0.0","graceful-fs": "^4.1.11","has-flag": "^2.0.0","hash-base": "^3.0.4","hash.js": "^1.1.3","hmac-drbg": "^1.0.1","hosted-git-info": "^2.5.0","https-browserify": "^0.0.1","ieee754": "^1.1.8","indexof": "^0.0.1","inherits": "^2.0.3","interpret": "^1.0.3","invert-kv": "^1.0.0","is-arrayish": "^0.2.1","is-binary-path": "^1.0.1","is-buffer": "^1.1.5","is-builtin-module": "^1.0.0","is-dotfile": "^1.0.3","is-equal-shallow": "^0.1.3","is-extendable": "^0.1.1","is-extglob": "^1.0.0","is-fullwidth-code-point": "^2.0.0","is-glob": "^2.0.1","is-number": "^3.0.0","is-posix-bracket": "^0.1.1","is-primitive": "^2.0.0","is-stream": "^1.1.0","isarray": "^1.0.0","isexe": "^2.0.0","isobject": "^2.1.0","jquery": "^3.2.1","json-loader": "^0.5.7","json-schema-traverse": "^0.3.1","json-stable-stringify": "^1.0.1","json5": "^0.5.1","jsonify": "^0.0.0","kind-of": "^4.0.0","lazy-cache": "^1.0.4","lcid": "^1.0.0","load-json-file": "^2.0.0","loader-runner": "^2.3.0","loader-utils": "^1.1.0","locate-path": "^2.0.0","lodash": "^4.17.4","longest": "^1.0.1","lru-cache": "^4.1.1","md5.js": "^1.3.4","mem": "^1.1.0","memory-fs": "^0.4.1","micromatch": "^2.3.11","miller-rabin": "^4.0.0","mimic-fn": "^1.1.0","minimalistic-assert": "^1.0.0","minimalistic-crypto-utils": "^1.0.1","minimatch": "^3.0.4","minimist": "^0.0.8","mkdirp": "^0.5.1","node-libs-browser": "^2.0.0","normalize-package-data": "^2.4.0","normalize-path": "^2.1.1","npm-run-path": "^2.0.2","number-is-nan": "^1.0.1","object-assign": "^4.1.1","object.omit": "^2.0.1","os-browserify": "^0.2.1","os-locale": "^2.1.0","p-finally": "^1.0.0","p-limit": "^1.1.0","p-locate": "^2.0.0","pako": "^0.2.9","parse-asn1": "^5.1.0","parse-glob": "^3.0.4","parse-json": "^2.2.0","path-browserify": "^0.0.0","path-exists": "^3.0.0","path-is-absolute": "^1.0.1","path-key": "^2.0.1","path-type": "^2.0.0","pbkdf2": "^3.0.14","pify": "^2.3.0","preserve": "^0.2.0","process": "^0.11.10","process-nextick-args": "^1.0.7","prr": "^0.0.0","pseudomap": "^1.0.2","public-encrypt": "^4.0.0","punycode": "^1.4.1","querystring": "^0.2.0","querystring-es3": "^0.2.1","randomatic": "^1.1.7","randombytes": "^2.0.5","read-pkg": "^2.0.0","read-pkg-up": "^2.0.0","readable-stream": "^2.3.3","readdirp": "^2.1.0","regex-cache": "^0.4.4","remove-trailing-separator": "^1.1.0","repeat-element": "^1.1.2","repeat-string": "^1.6.1","require-directory": "^2.1.1","require-main-filename": "^1.0.1","right-align": "^0.1.3","ripemd160": "^2.0.1","safe-buffer": "^5.1.1","semver": "^5.4.1","set-blocking": "^2.0.0","set-immediate-shim": "^1.0.1","setimmediate": "^1.0.5","sha.js": "^2.4.8","shebang-command": "^1.2.0","shebang-regex": "^1.0.0","signal-exit": "^3.0.2","source-list-map": "^2.0.0","source-map": "^0.5.7","spdx-correct": "^1.0.2","spdx-expression-parse": "^1.0.4","spdx-license-ids": "^1.2.2","stream-browserify": "^2.0.1","stream-http": "^2.7.2","string-width": "^2.1.1","string_decoder": "^1.0.3","strip-ansi": "^4.0.0","strip-bom": "^3.0.0","strip-eof": "^1.0.0","supports-color": "^4.4.0","tapable": "^0.2.8","timers-browserify": "^2.0.4","to-arraybuffer": "^1.0.1","tty-browserify": "^0.0.0","uglify-js": "^2.8.29","uglify-to-browserify": "^1.0.2","uglifyjs-webpack-plugin": "^0.4.6","url": "^0.11.0","util": "^0.10.3","util-deprecate": "^1.0.2","validate-npm-package-license": "^3.0.1","vm-browserify": "^0.0.4","watchpack": "^1.4.0","webpack": "^3.5.6","webpack-sources": "^1.0.1","which": "^1.3.0","which-module": "^2.0.0","window-size": "^0.1.0","wordwrap": "^0.0.2","wrap-ansi": "^2.1.0","xtend": "^4.0.1","y18n": "^3.2.1","yallist": "^2.1.2","yargs": "^8.0.2","yargs-parser": "^7.0.0"},"description": ""
}

3、命令行:

npm run webpack

转载于:https://www.cnblogs.com/mengfangui/p/7601833.html

webpack 实用配置总结相关推荐

  1. webpack实用配置

    开车之前,先介绍一些npm的命令: :D 进入D盘 mkdir webapp 创建webapp文件夹 cd webapp 进入webapp文件夹 mkdir webapp && cd ...

  2. Webpack实用工具之webpack-server

    Webpack实用工具之Webpack-server 一.webpack-server的原理简单解读 使用webpack-server时,webpack-server会为我们的当前的项目开启一个服务器 ...

  3. 实战 webpack 4 配置解析一

    配置 github 仓库:https://github.com/nystudio107/annotated-webpack-4-config 随着Web开发变得越来越复杂,我们需要工具来帮助我们构建现 ...

  4. vue + webpack 实用技巧

    vue + webpack 实用技巧 利用 webpack 给生产环境和发布环境配置不同的接口地址 在开发时,前后端分离同时进行开发.前端调用后端给的接口也是在局域网内部的.但是,当项目推到线上的时候 ...

  5. 从零搭建个人博客(1)-webpack环境配置

    本文作为搭建个人博客的开端,将会配置环境,以后做别的project也可以以此开始.代码托管在github. code: https://github.com/MSChuan/Blog-UI, demo ...

  6. 建立项目的webpack简单配置

    实战项目中的 Webpack 配置: 说明:以下命令通过 Git Bash 执行 1.建立webpack-demo文件夹及npm初始化 Administrator@PC-20170414ZFJO MI ...

  7. Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue

    Vue 单文件组件 传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...

  8. reactjs使用eject暴露webpack核心配置

    reactjs使用eject暴露webpack核心配置

  9. 六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离

    一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...

最新文章

  1. python networkx绘制图
  2. Java提高班(一)Thread详解
  3. python修改电脑名称_python 脚本之批量更改主机名
  4. 探索 ASP.NET Futures (Part 2 - Search Enabled)
  5. 解决vue中路由跳转同一个路径报错
  6. 将Session写入Memcache
  7. 论文浅尝 | AAAI2020 - 多分量图卷积协同过滤方法
  8. 信息学奥赛一本通C++语言——1054:三角形判断
  9. 数据算法之折半查找(binSearch)的Java实现
  10. 新IT运维时代 | Docker运维之最佳实践-上篇
  11. 一种基于flex的可视化多层流量切分界面的实现
  12. 计算器归零按键c语言,计算器有关按键说明大全
  13. STC-ISP烧录软件
  14. 单片机原理及应用程序c语言版题库,单片机原理及应用(C语言版)
  15. 【Python学习】最新版pyecharts之绘制Map地图
  16. 独孤求败 —— 什么才是一个完整机器学习项目流程? 适合九成以上的场景
  17. PHP学习笔记(二)——行云博客
  18. WZOI-272友谊
  19. eclipse导入工程报错Faceted Project Problem(1 item)
  20. 极客日报:阿里旗下App接入微信支付;马斯克成世界首富;PostgreSQL 14 RC 1发布

热门文章

  1. 响应式网站与自适应网站比较
  2. VM虚拟机安装centos详细图文教程
  3. ★LeetCode(784)——字母大小写全排列(JavaScript)
  4. LeetCode(461)——汉明距离(JavaScript)
  5. POST请求传递参数(十一)
  6. php操作剪贴板内容代码,JavaScript操作剪贴板的实现方法介绍
  7. 孩子哭的时候大人应该怎么办?
  8. 教你如何判断水泥的质量好坏?
  9. 做训练营需要具备什么样必备条件?
  10. 整个线上营销_而言,最重要的是什么?