webpack使用记录

最新推荐文章于 2024-09-03 17:33:35 发布
最新推荐文章于 2024-09-03 17:33:35 发布
阅读量103 收藏
点赞数
文章标签： webpack 测试 javascript ViewUI
原文链接：https://segmentfault.com/a/1190000015676435
版权

webpack 2x

  • entry
  • output
  • loaders
  • plugins

webpack 4x:

新手指南

从零开始

npm init
npm install webpack --save-dev //webpack@4.16.1
npm install webpack-dev-server --save-dev //webpack-dev-server@3.1.4

创建webpack.config.js

var config = {

}

module.exports = config

注：这里的module.exports = config相当于export default config ,由于目前还没有安装支持ES6的编译插件，因此不能直接使用ES6的语法 否则会报错

package.json的scripts里添加一个快速启动webpack-dev-server服务脚本:

图片描述
npm run dev 后默认打开的地址是: 127.0.0.1:8080
可以自己配置：

"dev": "webpack-dev-server --host 197.163.1.2 --port 8888 --open --config webpack.config.js" 
// webpack.config.js
var path = require('path')
module.exports = {
    entry: { //告诉webpack从哪里找依赖并编译
        main: './main'
    },
    output: { // 配置编译的文件储存位置和文件名
        path: path.join(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'main.js'
    }
};

图片描述

// index.html
<!DOCTYPE html>
<html>
<head>
    <title>webpack test</title>
</head>
<body>
   <div id="app">您好, 镜心的小树屋欢迎您</div>
   <script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>

npm run dev 启动
如果报错：

图片描述

 npm install webpack-cli -D  // "webpack-cli": "^3.0.8",
 npm run dev

图片描述

main.js

document.getElementById('app').innerHTML = "你好美"

图片描述

进行打包

webpack --progress -- hide-modules// 会生成一个/dist/main.js

完善配置文件

https://github.com/icarusion/...

// css加载器
npm install css-loader --save-dev // style-loader@0.21.0

npm install style-loader --save-dev // css-loader@1.0.0

安装后，在webpack.config.js文件配置Loader，添加.css文件处理

图片描述
module对象rules属性中可以指定一系列loaders。
use选型的值可以是数组或字符串，如果是数组，它的编译顺序就是从后往前。
extract-text-webpack-plugin插件是用来把散落在各地的css提取出来，并生成一个main.css文件，最终在index.html通过<link>加载

npm install extract-text-webpack-plugin --save-dev
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var config = {
    entry: {
        main: './main'
    },
    output: {
        path: path.join(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'main.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: 'css-loader',
                            fallback: 'vue-style-loader'
                        })
                    }
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
                loader: 'url-loader?limit=1024'
            }
        ]
    },
    plugins: [
    // 重命名提取后的css文件
        new ExtractTextPlugin({
            filename: '[name].css',
            allChunks: true
        })
    ]
};

module.exports = config;

快速构建

快速构建最好的自然是使用脚手架， 你可以选择：

Webpack boilerplate CLI： https://www.npmjs.com/package...
easywebpack-cli： https://yuque.com/hubcarl/ves...
vue-cli: https://github.com/vuejs/vue-cli

单文件系统 与 vue-loader

先看这个：https://vue-loader.vuejs.org/... 了解文档内容

npm install --save vue  // vue@2.5.16
npm install --save-dev vue-loader vue-style-loader vue-template-compiler vue-hot-reload-api babel babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime

VUE-CLI 3 :https://cli.vuejs.org/guide/installation.html

修改webpack.config.js 支持.vue和 es6

var path = require('path')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
    entry: { //告诉webpack从哪里找依赖并编译
        main: './main'
    },
    output: { // 配置编译的文件储存位置和文件名
        path: path.join(__dirname, './dist'),//  打包后的输出目录
        publicPath: '/dist/',// 指定资源文件引用目录(如果资源在cdn上 可以是cdn网址)
        filename: 'main.js'//
    },
    module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    css: ExtractTextPlugin.extract({
                        use: 'css-loader',
                        fallback: 'vue-style-loader'
                    })
                }
            }
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
          },
          {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                use: 'css-loader',
                fallback: 'vue-style-loader'
            })
          }

        ]
    },
    plugins: [
      new ExtractTextPlugin("main.css")
    ]
};

根目录新建.babelrc

{
    "presets": ["es2015"],
    "plugin": ["transform-runtime"],
    "comments": false
}

注意： 此种设置需要把webpack降级到2x：
webpack: 2.3.2
webpack-dev-server: 2.4.2

我们看看实际项目中依赖（webpack2的）

{
  "name": "test",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "AlexZ33",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src",
    "test": "mocha test/*.js"
  },
  "dependencies": {
    "axios": "^0.16.1",
    "d3": "^4.8.0",
    "d3-cloud": "^1.2.4",
    "echarts": "^3.5.2",
    "echarts-wordcloud": "^1.1.0",
    "iview": "^2.5.1",
    "jquery": "^3.3.1",
    "jsonp": "^0.2.1",
    "lodash.merge": "^4.6.1",
    "promise-polyfill": "^6.0.2",
    "shave": "^2.1.3",
    "url-search-params": "^0.9.0",
    "vue": "^2.3.4",
    "vue-router": "^2.2.0",
    "vue-select": "^2.4.0",
    "vuex": "^2.4.0",
    "wordcloud": "^1.0.6"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.2.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chai": "^4.0.2",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "eslint": "^3.14.1",
    "eslint-config-standard": "^6.2.1",
    "eslint-friendly-formatter": "^2.0.7",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-html": "^2.0.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.10.0",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "fullpage.js": "^2.9.4",
    "function-bind": "^1.1.0",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "mocha": "^3.4.2",
    "node-sass": "^4.9.0",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.1.0",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.3",
    "semver": "^5.3.0",
    "shelljs": "^0.7.7",
    "url-loader": "^0.5.7",
    "vue-loader": "^12.2.1",
    "vue-style-loader": "^2.0.0",
    "vue-template-compiler": "^2.3.4",
    "webpack": "^2.2.1",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.16.1",
    "webpack-merge": "^2.6.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

webpack+vue-cil 中proxyTable配置接口地址代理

在项目开发的时候，接口联调的时候一般都是同域名下，且不存在跨域的情况下进行接口联调，但是当我们现在使用vue-cli进行项目打包的时候，我们在本地启动服务器后，比如本地开发服务下是 http://localhost:8080 这样的访问页面，但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址，我们这样直接使用会存在跨域的请求，导致接口请求不成功，因此我们需要在打包的时候配置一下，我们进入 config/index.js 代码下如下配置即可：

dev: {

    // 静态资源文件夹
    assetsSubDirectory: 'static',

    // 发布路径
    assetsPublicPath: '/',

    // 代理配置表，在这里可以配置特定的请求代理到对应的API接口
    // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
    // 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
    proxyTable: {
      '/api': {
        target: 'http://xxxxxx.com', // 接口的域名
        // secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '^/api': ''
        }
      }
    },

    // 本地访问 http://localhost:8080
    host: 'localhost', // can be overwritten by process.env.HOST

接口地址原本是 /save/index，但是为了匹配代理地址，在前面加一个 /api, 因此接口地址需要写成这样的即可生效 /api/save/index。

注意： '/api' 为匹配项，target 为被请求的地址，因为在 ajax 的 url 中加了前缀 '/api'，而原本的接口是没有这个前缀的，所以需要通过 pathRewrite 来重写地址，将前缀 '/api' 转为 '/'。如果本身的接口地址就有 '/api' 这种通用前缀，就可以把 pathRewrite 删掉。

常见示例如在 ：https://github.com/bailicangd... 这里加

proxyTable: {
      // '/pre-web': 'http://118.24.153.55/' // 线上
      '/pre-web': 'http://118.24.153.56' // 测试
      // 'pre-web': 'http://118.24.153.57' // 本地服务器
    },

单页面的多页面切换

按需加载

　参考

《ｖｕｅ实战》
vue-loader: https://vue-loader.vuejs.org/...
https://www.jianshu.com/p/f05...
https://www.cnblogs.com/tugen...
http://vuejs-templates.github...

weixin_33739541
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解如何webpack使用DllPlugin
10-17
使用 DllPlugin 需要两个构建配置文件：`webpack.config.js`（主构建配置）和 `webpack.dll.config.js`（DLL 构建配置）。 1. **DLL构建过程** 在 `webpack.dll.config.js` 中，定义需要打包到 DLL 文件的第三方...
详解webpack多页面配置记录
11-29
之前也写过webpack学习记录，项目中需要一个常用的webpack多页面配置，所以才动手，本着能写一行是一行的原则，开始了配置webpack之旅。 定目录结构 首先我只需要开发环境（包含自动更新）和打包环境，初定的目录...
webpack使用总结
大灰狼的小绵羊哥哥的博客
02-15 8203
前言： http://www.jianshu.com/u/82ac9006c5aa 学习webpack的时候，看过它的官网，发现非常难懂，各种内容编排的很乱，并且挺生涩难懂的，和React Native等项目的官网比起来，差太多了，所以如果刚开始接触webpack的话，不建议直接去其官网看。 一、webpack介绍 1.1、什么是webpack webpack是一个m
使用webpack报错记录
Vanllen_moon的博客
04-08 574
1.打包html资源时报错：TypeError: Cannot read property ‘thisCompilation’ of undefined at CommonJsChunkFormatPlugin.apply 查阅资料后，经尝试 降低compression-webpack-plugin版本，更新extract-text-webpack-plugin，均无法解决。 经尝试修改版本后得到解决，以下为修改后的版本号： （打开package.json可看到版本号） 执行的命令为： npm i we
webpack学习记录
fangqi20170515的博客
08-08 321
Webpack是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。我们将 Webpack 输出的文件叫做bundle。开发模式：仅能编译 JS 中的 ES Module 语法生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码。........................
webpack使用记录1（hello world）
zhaokei的博客
05-28 281
一、瞎看资料 https://www.cnblogs.com/-walker/p/6056529.html Webpack是答案吗 https://refined-x.com/2017/06/16/Webpack是答案吗/ webpack之傻瓜式教程及前端自动化入门 https://www.cnblogs.com/liqiyuan/p/6246870.html 跟着学到了输入webpack，报错 ...
webpack使用说明
weixin_65100963的博客
05-02 1290
webpack webpack基本介绍 webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 现代 javascript 应用程序的 静态模块打包器 (module bundler) ● 静态: 文件资源 ● 模块: node环境, 引入文件, 遵守模块化语法 除了合并代码, 还可以翻译和压缩代码 ● less/sass -> css ● ES6/7/8 -> ES5 ● html/css/js -> 压缩合并 小结
Webpack使用常用功能记录
wo_buzhidao的博客
06-04 112
1.配置第三方插件可以全局使用； 比如wkt与geojson互转插件terraformer-wkt-parser，安装依赖后，在webpack.config.js文件中，在plugins数组中加入如下 plugins: [ new webpack.ProvidePlugin({ WKTGeojson: 'terraformer-wkt-parser', }) ], 这样在全局代码中可以直接使用WKTGeojson作为terraformer-wkt-par
webpack dll优化记录
qq_21476953的博客
07-05 208
webpack dll优化记录 1、编写dll打包配置 // webpack.dll.js const path = require('path'); const webpack = require('webpack'); console.log('webpack dll start...') const dllPath = path.join(__dirname, 'dll'); module...
webpack插件使用记录
I'm Baymax D
03-04 186
CleanWebpackPlugin 使用CleanWebpackPlugin可以在构建的时候自动清除之前构建残留的dist目录中的内容，避免手动操作。 安装 npm install clean-webpack-plugin --save-dev 使用 # webpack.config.js # 需要注意的是，CleanWebpackPlugin在引入时需要解构 const {CleanWebp...
webpack 使用与配置
Bug制造者
09-05 358
webpack 使用与配置
webpack基础使用,实现隔行变色效果
08-04
在本项目中，我们将会探讨如何使用 Webpack 的基本配置来实现一个简单的功能——隔行变色效果，这个功能通常在网页表格中用于提高可读性。 首先，让我们看一下 `webpack.config.js` 文件，这是 Webpack 的核心配置...
优化 Webpack 打包体积的思路
乐辞的博客
09-01 513
优化 Webpack 打包体积的思路，引入如 UglifyJsPlugin 等代码压缩插件，可以有效地压缩 JavaScript 代码，减小文件体积。这样不仅减少了打包体积，还利用了 CDN 的缓存优势，提高加载速度。配置中选择合适的选项，以确保开发阶段能够提供足够的错误追踪信息，同时不会增加过多的打包体积。：检查并移除不必要的插件，根据环境区分开发和生产配置，避免将调试工具打包到生产环境中。
vue-virtual-scroller插件实现不等高表格虚拟滚动
Hi_MrXiao的博客
09-02 667
这是因为vue-virtual-scroller插件使用了超过浏览器理解的js代码，需要转换为旧版es5规范的代码浏览器才能正常执行。对于大量的表格数据加载，如果我们全部加载不仅面临加载等待时间长，容易崩溃的问题，还有可能导致浏览器缓存数据量大而导致页面使用卡顿的情况。在页面中使用，不等高的列表需要使用DynamicScroller+DynamicScrollerItem这种方式。加载来优化这种情况，在这里我们使用插件vue-virtual-scroller来实现虚拟滚动。使用过程中可能存在的问题。
vue多环境配置和打包
最新发布
qq_38880880的博客
09-03 594
在每个.env文件中，你可以定义环境变量。这些变量可以在你的Vue应用或webpack配置中使用。变量需要以VUE_APP_为前缀才能被webpack识别。.env.[mode]：仅为指定的模式加载的配置文件，例如.env.development、.env.production、.env.test。Vue CLI会自动加载对应模式的.env文件，并将变量注入到你的项目中。.env.local：本地覆盖配置，不加入版本控制。件名的后缀来指定它们仅在特定模式下被加载。.env：所有环境下都会加载的通用配置。
Vue -- 总结 02
2301_78949452的博客
08-30 1861
Vue脚手架，创建的文件结构，App.vue，动态绑定绑定属性
Nest.js 实战 (十一)：配置热重载 HMR 给服务提提速
白雾茫茫丶
09-02 541
这篇文章介绍了Nest.js服务在应用程序引导过程中，TypeScript编译对效率的影响，以及如何通过使用webpackHMR来降低应用实例化的时间。文章包含具体教程，指导读者如何在项目中安装依赖包，并在根目录下新增webpack配置文件webpack-hmr.config.js来调整HMR相关的配置。最后，文章总结了如何通过自定义webpack配置来更好地控制HMR行为。
vue2设置运行环境和打包环境变量
家里有只小肥猫
09-01 725
env 文件自定义环境变量
那怎么快速使用webpack
08-24
要快速使用Webpack，可以在package.json中安装webpack，然后使用npm install来安装依赖，再运行命令npx webpack来编译打包源文件。另外，也可以使用Webpack的CLI工具，在命令行中输入webpack来进行打包。 ### 回答...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值