以下展示2.x 配置文件信息

v1 迁移至 v2 官方有更详细的说明

具体详见 https://webpack.js.org/guides/migrating/

只列举常用到参数进行描述, 或者我在使用中遇到的 也会不定时更新

一些 2.x 的改变

  • module.loaders -> module.rules

    //v1.x module使用loaders来配置加载器
    module:{
    //加载器配置
    loaders: [
        // test 通过正则表达式去匹配不同后缀的文件名
        // loader 选择当前文件要使用的加载器, 如果要使用多个加载器用 ! 连接
        { test: /\.js$/, loader: 'babel-loader?presets[]=es2015' },
        { test: /\.less/, loader: 'style-loader!css-loader!less-loader'}
    ]
    },
    //v2.x module中的loaders 替换成了 rules
    module:{
    //加载器配置
    rules: [
        {
            test: /\.js$/,
            use:[
                { loader: 'babel-loader', options: { presets: ['es2015'] }
            ]
        },
        {
            test: /\.less$/,
            // use 第一种写法
            // 使用 use 来管理所使用使用的 多个 loader
            // 不需要再使用 ! 来拼接, 使得更容易区分, 每个 loader 都是一个对象
            use:[
                // 如果需要多个loader
                { loader: 'style-loader'    },
                { loader: 'css-loader', options:{  modules: true }  },
                { loader: 'less-loader'     },
            ],
    
            // use 第二种写法
            use: [
                "style-loader", "css-loader?modules=true", "less-loader"
            ]
        },
    ]
    },
  • 删除了自动追加 -loader 模块的扩展名

    在写入配置时 -loader 不可省略

    如若还是使用以前的配置, 可以配置 resolveLoader.moduleExtensions 来实现

    但官方并不建议这样使用

    module: {
    rules: [
        {
            test: /\.less$/,
            use: [
                "style", "css", "less",
            ]
        }
    ]
    },
    resolveLoader: {
    moduleExtensions: ["-loader"]
    }
  • json-loader is not required anymore

    如果当前配置文件没有为 json 写入配置, webpack会自动尝试加载 json-loader

webpack 2.x 配置的更多相关文章

  1. webpack + vuejs 基本配置(一)

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...

  2. webpack react基础配置一

    简单介绍webpack react基本配置,入门型: 环境配置: 依赖nodejs,官网下载最新版的nodejs:nodejs.org/en 安装完nodejs  npm便自动集成了,通过npm安装其 ...

  3. webpack 多entry 配置

    // webpack 多entry 配置var path = require('path'); module.exports = { entry: { entry2: './entry.js', de ...

  4. react+webpack开发环境配置

    react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...

  5. webpack的简单配置

    本人刚开始也不会写webpack配置,刚开始在网上搜索了了一些,看的也是刚刚理解,所以准备自己写下来,已作纪念和贡献给像我一样不会配置的“童鞋”们! 1.创建webpack配置文件 在项目文件下创建一 ...

  6. Webpack 2 视频教程 019 - Webpack 2 中配置多页面编译

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  7. Webpack的基本配置

    一.优化项目结构,创建相关的文件,项目结构如下:src文件夹存放相关js文件,index.html项目的首页面,dist文件夹是webpack 打包 目录. index.js内容为: alert('我 ...

  8. webpack 4+ vue-loader 配置 (完善中...)

    webpack 4+ vue-loader 配置 写的demo,clone下来后,npm run dev即可,(此demo并未加入router) 可能会由于版本问题,配置会有些许改动,暂时都是可用的 ...

  9. [转] vue&webpack多页面配置

    前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...

  10. webpack 4.0配置2

    上个博客记录了webpack 的基本配置今天主要是css-loader的介绍,包括单独提出css,压缩css.js文件 这里使用的插件npm 地址:https://www.npmjs.com/pack ...

随机推荐

  1. 转账示例(四):service层面实现(线程管理Connection,AOP思想,动态代理)(本例采用QueryRunner来执行sql语句,数据源为C3P0)

    用了AOP(面向切面编程),实现动态代理,service层面隐藏了开启事务.1.自行创建C3P0Uti,account数据库,导入Jar包 2.Dao层面 接口: package com.learni ...

  2. mysql常用技能分享

    一,MySQL查询的五种子句: 1,where(条件查询),常用的运算符: ①比较运算符 > , < , = , != , >= , <= , in( ) , between ...

  3. 速成制作rpm包

    FPM 由于很多软件在安装时需要编译,这会浪费不少的时间,为了提升部署效率,于是就想到制作rpm包.通常rpm包的制作是使用rpmbuild命令来制作,但是你需要知道它的语法,比较繁琐.这就用到了FP ...

  4. 对数据缺失的处理(R)

    在进行数据分析之前,我们往往需要对数据进行预处理,而最重要一部分就是怎么处理哪些缺失的数据. 通常的方法有四种: 删除这些缺失的数据. 用最高频数来补充缺失数据. 通过变量的相关关系来填充缺失值. 通 ...

  5. Java命名默认规范

    学习java的时候,命名的大小写经常弄混,所以在此总结一下java命名规范 1.project(项目名) 说法不一,暂定小写,eg:arraytest 2.包名 小写,eg:package array ...

  6. Javascript中变量作用域

    <script type="text/javascript"> var a = 10; var Bar = (function () { console.log(a); ...

  7. register_sysctl_table实现内核数据交互

    作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. Sysctl是一种用户应用来设置和获得运行时内核的配置参数的一种有效方式,通 ...

  8. codeforce vk cup2017

    D. k-Interesting Pairs Of Integers time limit per test 2 seconds memory limit per test 256 megabytes ...

  9. python基本语法-加密解密等

    1. 编写函数,要求输入x与y,返回x和y的平方差 2. 计算1到100的平方的和 3. 编写函数,若输入为小于100的数,返回TRUE,大于100的数,返回FALSE 4. 某个公司采用公用电话传递 ...

  10. Qt 之 入门例程(二)

    本文以 Qt 中的 QtConcurrent::run() 函数为例,介绍如何将函数运行在单独的某一个线程中. 1  QtConcurrent::run() QtConcurrent 是一个命名空间, ...