webpack 简单配置

1.webpack 是一个现代JavaScript 应用程序的静态打包器,它能够把各种资源,例如JS,样式,图片

  等都作为模块来使用处理,将许多松散的模块按照依赖和规则打包成符合生产部署的前端资源,

  还可以将按需加载的模块进行代码分割,等到实际需要的时候再异步加载。

2.安装

  前提条件,请确保安装了Node.js的最新版。

  进入相应的文件夹

    首先执行 进入相应的文件夹 npm init 初始化

    然后可以全局安装 npm install webpack --save-dev

    安装指定的版本使用:npm install webpack@3.0.0 --save-dev

  安装好之后写一个hello.js 进行打包

3.建立项目的webpack 文件

    首先初始化目录: npm init

    然后安装webpack: npm install webpack --save-dev

  如果webpack 的配置文件不使用默认的文件名webpack.config.js

  那么在执行打包的时候,就要指定配置文件的名字

    例如: 配置文件的名字为 webpack.dev.config.js

    webpack --config webpack.dev.config.js

    webpack 的打包命令可以结合 npm 的脚本使用例如:

        那么执行的命令为 : npm run webpack

  4.配置:

    (1) Entry 应用程序的起点入口,可以是一个文件,如果传递一个数组,那么那么数组的每一

      项都会执行,也可以是一个对象。

      例如:

          entry: "./app/entry", // string | object | array 
          entry:["./app/entry1", "./app/entry2"],
          entry: { a: "./app/entry-a", b: ["./app/entry-b1", "./app/entry-b2"] },

    (2) Output 位于对象最顶级键(key),包括了一组选项,指示webpack 如何输出,

      以及哪里输出,和他你所打包或使用webpack 载入的任何内容。

      例如:     

        output: {
	            // webpack 如何输出结果的相关选项
	             path: path.resolve(__dirname, "dist"), // string
	            // 所有输出文件的目标路径
	            // 必须是绝对路径(使用 Node.js 的 path 模块)
    	            filename: "bundle.js", // string
    	            filename: "[name].js", // 用于多个入口点(entry point)(出口点?)
	            filename: "[chunkhash].js", // 用于长效缓存
   	             // 「入口分块(entry chunk)」的文件名模板(出口分块?)
   	             publicPath: "/assets/", // string
   	             publicPath: "",
                publicPath: "https://cdn.example.com/",
    	            // 输出解析文件的目录,url 相对于 HTML 页面
	            library: "MyLibrary", // string,
	            // 导出库(exported library)的名称
   	             libraryTarget: "umd", // 通用模块定义
       	             libraryTarget: "umd2", // 通用模块定义
	             libraryTarget: "commonjs2", // exported with module.exports
	             libraryTarget: "commonjs-module", // 使用 module.exports 导出
	             libraryTarget: "commonjs", // 作为 exports 的属性导出
	             libraryTarget: "amd", // 使用 AMD 定义方法来定义
	             libraryTarget: "this", // 在 this 上设置属性
	             libraryTarget: "var", // 变量定义于根作用域下
	             libraryTarget: "assign", // 盲分配(blind assignment)
	             libraryTarget: "window", // 在 window 对象上设置属性
	             libraryTarget: "global", // property set to global object
	             libraryTarget: "jsonp", // jsonp wrapper
    	            // 导出库(exported library)的类型
    	             /* 高级输出配置(点击显示) */
    	            pathinfo: true, // boolean
	             // 在生成代码时,引入相关的模块、导出、请求等有帮助的路径信息。
	             chunkFilename: "[id].js",
	             chunkFilename: "[chunkhash].js", 
	             // 长效缓存(/guides/caching)
	             //  附加分块(additional chunk)」的文件名模板
	             jsonpFunction: "myWebpackJsonp", // string
	             // 用于加载分块的 JSONP 函数名
	            sourceMapFilename: "[file].map", // string
	            sourceMapFilename: "sourcemaps/[file].map", // string
	             // 「source map 位置」的文件名模板
	             devtoolModuleFilenameTemplate: "webpack:///[resource-path]", // string
	            // 「devtool 中模块」的文件名模板
	            devtoolFallbackModuleFilenameTemplate: "webpack:///[resource-path]?[hash]", // string
	             // 「devtool 中模块」的文件名模板(用于冲突)
	               umdNamedDefine: true, // boolean
                // 在 UMD 库中使用命名的 AMD 模块
	               crossOriginLoading: "use-credentials", // 枚举
	              crossOriginLoading: "anonymous",
	               crossOriginLoading: false,
                // 指定运行时如何发出跨域请求问题
    	            /* 专家级输出配置(自行承担风险) */
    	            devtoolLineToLine: {
                      test: /\.jsx$/
                },
	            // 为这些模块使用 1:1 映射 SourceMaps(快速)
	            hotUpdateMainFilename: "[hash].hot-update.json", // string
	              // 「HMR 清单」的文件名模板
	            hotUpdateChunkFilename: "[id].[hash].hot-update.js", // string
	            // 「HMR 分块」的文件名模板
	            sourcePrefix: "\t", // string
                // 包内前置式模块资源具有更好可读性
            },

    3)Plugins

      例如: 安装 html-webpack-plugin

        命令: npm install html-webpack-plugin --save-dev

        首先在webpack.config.js 中引入插件

          var htmlWebPackPlugin = require('html-webpack-plugin');

          然后在:

            plugins: [
              new htmlWebPackPlugin({
                // 指定生成的文件的名字
              filename:'index.html',
                // 指定html 模板
              template:'index.html',
                // 标签生成的位置
              inject:'head',
              /* title:'webpack is good',
                data: new Date()*/
              minify:{
                // 删除注释
                removeComments:true,
                // 删除空格
                collapseWhitespace: true
              }
          })]

    (4)loader

      loader 就是webpack 用来预处理模块的,在一个模块被引入之前,会预先

      用loader处理模块的内容。

      安装css loader

        npm install style-loader css-loader --save-dev
        npm install postcss-loader --save-dev
        npm install autoprefixer --save-dev
          {
            test: /\.css$/,
            loaders: ['style-loader', 'css-loader',
            // 处理浏览器前缀
            { loader: 'postcss-loader',
            options: {
              plugins: [require('postcss-import'),
              require('autoprefixer')],
              browser: ['last 5 versions'] } }]
            }

      sass

        npm install sass --save-dev

        npm install sass-loader --save-dev

        { //sass打包处理,加载从右向左,注意顺序

            test:/\.sass$/,

            use: [
              {loader: "style-loader"},
              {loader: "css-loader"},
              {loader: "postcss-loader",options:{
                plugins:[require('postcss-import'),require('autoprefixer')] //自动处理class加前缀,-ms-和-webkit-
              }},{loader: "sass-loader"}
            ]
      }

    图片处理

      npm install file-loader --save-dev
        {
          // 图片处理
          test:/\.(png|jpg|jpeg|gif|svg)$/i,
          use:[
            {
              loader:'file-loader',
              options:{
                name:'src/assets/[name]-[hash:5].[ext]'
              }
            }
           ]
        }
      npm install url-loader --save-dev 可以将图片转为base64
        {
          // 图片处理
          test:/\.(png|jpg|jpeg|gif|svg)$/i,
          use:[
              {
                loader:'url-loader',
                options:{
                  limit:20000000,
                  name:'src/assets/[name]-[hash:5].[ext]'
                }
              }
          ]
        }

    (5)devServer

      安装命令:

        npm install webpack-dev-server --save-dev
        在 package.json 中的 scripts 中添加 "start": "webpack-dev-server"
        devServer: {
        // 自动打浏览器
        open:true,
        // 访问端口
        port:8090,
    }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Linyb极客之路

RESTful API设计指南

在RESTful架构中,每个网址代表一种资源(resource),所以网址中不能有动词,只能有名词,而且所用的名词往往与数据库的表格名对应。一般来说,数据库中的...

1243
来自专栏吴伟祥

文件拷贝工具 原

WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端。同时支持SCP协议。它的主要功能就是在本地与远程计算机间安全的复制文件。.winsc...

1223
来自专栏尚国

EOS节点远程代码执行漏洞细节

漏洞存在于在 libraries/chain/webassembly/binaryen.cpp文件的78行,

964
来自专栏葡萄城控件技术团队

Winform文件下载之WinINet

在C#中,除了webclient我们还可以使用一组WindowsAPI来完成下载任务。这就是Windows Internet,简称 WinINet。本文通过一个...

2258
来自专栏程序员宝库

vue-cli 脚手架中 webpack 配置基础文件详解

vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用,它使得我...

2753
来自专栏同步博客

掀开断点续传那一层面纱(下载篇)

  这一篇文章主要介绍的是http协议下载时的断点续传,详细到各个步骤。主要步骤有:DNS查找、TCP三次握手、http请求发送、TCP协议数据传输、暂停后的状...

1454
来自专栏技术小黑屋

读懂Java中的Socket编程

Socket,又称为套接字,Socket是计算机网络通信的基本的技术之一。如今大多数基于网络的软件,如浏览器,即时通讯工具甚至是P2P下载都是基于Socket实...

1202
来自专栏前端说吧

Gulp安装流程、使用方法及cmd常用命令导览

4416
来自专栏一名合格java开发的自我修养

javaOOM该分析dump文件而不是看异常log日志原因

应用程序出现OOM异常,你是否仍然通过看日志的方式去排查问题(该方式定位解决问题是大概率的巧合而已)?正确的排查方案是进行dump文件分析,你知道为什么吗?

4244
来自专栏大学生计算机视觉学习DeepLearning

c++ 网络编程(二)TCP/IP linux 下多进程socket通信 多个客户端与单个服务端交互代码实现回声服务器

原文链接:https://www.cnblogs.com/DOMLX/p/9612820.html

4609

扫码关注云+社区

领取腾讯云代金券