webpack 使用经验记录

css模块导入依赖控制(webpack 中使用postcss 导入依赖问题)

问题1

直接在 entry 指定css文件,依赖顺序无法控制,极不稳定,会出现基础css在编译后跑到后面去

js 中 require css问题依旧

解决
在css中 @import 问题解决,但有另一个问题

但产生
问题2:
css 中的@import 模块没法在 resolve.modules 指定的路径中寻找模块
(记得过去是可以的,不清楚是不是更新后有所调整)

解决
使用 postcss-smart-import 插件,path 属性中指定属性

module.exports = {
  plugins: [
    require('postcss-smart-import')({
      path: ['E:/_work/Dropbox/github/modules/base-libs/css']
    })
  ]
}

可 按需/异步 加载

即只有到真正用的时候才加载
下面2种方式效果一样。不过很奇怪,很早以前用 import('moduleA') 只能异步,却无法按需。即虽然没运行,但固定会加载此js

使用 import (荐)

例子直接使用 node_modules 中的模块,当然也可以指定路径模块

function determineDate() {
    import('katex').then(function(moment) {
        console.log(moment);
    }).catch(function(err) {
        console.log('Failed to load moment', err);
    });
}
//console.log(determineDate)// 只是声明,但不执行,看是否下载js。结果是不会下载,实现了按需
setTimeout(determineDate,1000)// 是否是1s后下载js。结果是的,实现了按需

使用 bundle-loader

下例用了路径模块,当然也可以直接使用 node_modules 中的模块

function determineDate() {

    var waitForChunk = require('bundle-loader!./file.js')
    // var waitForChunk = require(bundle-loader?lazy&name=[name]!./file.js)

    waitForChunk(function (file) {
        console.log(file)
    });

}

//console.log(determineDate)// 只是声明,但不执行,看是否下载js。结果是不会下载,实现了按需
setTimeout(determineDate,1000)// 是否是1s后下载js。结果是的,实现了按需

可按需引入构建的包

之前出现这样的现象,通过CommonsChunkPlugin打出的某独立包某页面并不需要,但不引入却会报错。那时误以为,CommonsChunkPlugin打出的包都是关联的,所有页面必须全部引入,其实不是。

发现原因:
之前要引入所有包,是因为 CommonsChunkPlugin > names数组头居然生成了其他模块,关键我并没有指定这种模块(其实生成的这种不相干的模块应该生成到尾部才是。。。)。即某个生成的模块还包含其他模块,而这个其他模块某页面是必须的。
解决很简单,2种方案:
1. 可以查看源码,把这个多出来的模块固定打入某个公共包
2. names数组头尾都放公共包

问题代码:

module.exports ={
    entry:{
        common: ['zoom-touch', 'Popup', 'vue', 'common-mobile', 'slider-one-load','msg-mobile','string-handle',"j/common.js"],
        
        // click-vue 生成进来了,明明没有指定。这个模块所有页面都会用,预想是生成进 names 数组尾部才是,即common中。
        // 结论:`CommonsChunkPlugin` > `names` 头尾都不干净,中间才干净。或者内部依赖问题所致
        katex:[ 'katexcss','katex', './src/js/modules/latexParse.js']
    },
    plugins:[
        new webpack.optimize.CommonsChunkPlugin({           
            names:['katex','common']
        })
    ]    
}
    


webpack 使用场景,与其他打包工具比较

webpack / browserify 主要用来打包web应用

打包独立模块请用 rollup

alias 精简模块路径

可指向路径,还可直接指向模块

  1. 定义别名
module.exports = {
    resolve: {
        alias: {
            // 路径
            j:'./src/js',
        
            // 模块
            ChunkedShow: 'E:/_work/Dropbox/github/modules/chunked-show/src/v1/chunked-show.js'
        
        }
    }
}
  1. 使用别名
// 1路径
import {ChunkedShow} from 'j/index'; // 相当于 ./src/js/index

// 2模块
import {ChunkedShow} from 'ChunkedShow';

转载于:https://www.cnblogs.com/cqlql/p/7097015.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 很高兴回答你的问题。要快速使用Webpack,可以在package.json中安装webpack,然后使用npm install来安装依赖,再运行命令npx webpack来编译打包源文件。另外,也可以使用Webpack的CLI工具,在命令行中输入webpack来进行打包。 ### 回答2: 要快速使用webpack,可以按照以下步骤进行: 1. 安装Node.js和npm:Webpack是一个基于Node.js的工具,首先需要安装Node.js和npm,可以从官网上下载安装包并按照提示完成安装。 2. 创建项目目录并初始化:在命令行中进入项目的根目录,运行命令`npm init`,按照提示初始化一个新的项目,生成一个`package.json`文件,该文件记录了项目的元数据和依赖项。 3. 安装webpack和相关的依赖:运行命令`npm install webpack webpack-cli --save-dev`,这会将webpack及其命令行工具安装到项目的`node_modules`目录中,并将其保存为开发依赖。 4. 创建webpack配置文件:在项目根目录下创建一个名为`webpack.config.js`的文件,这是webpack的配置文件,用于指定打包的入口文件、输出文件等。 5. 编写webpack配置:在`webpack.config.js`文件中,可以通过CommonJS或ES6模块的语法来编写配置,指定入口文件、输出文件的路径并配置其他相关选项,如加载器和插件等。 6. 编写代码:根据项目需求,在src目录中编写需要打包的代码文件,如JavaScript、CSS、HTML等。 7. 运行webpack:在命令行中运行`npx webpack`命令,Webpack将根据配置文件进行打包,并将生成的打包文件输出到指定的目录中。 8. 查看打包结果:在浏览器中打开生成的输出文件,检查打包结果是否符合预期。 这些步骤可以帮助你快速使用Webpack来打包你的项目,但是要根据具体项目需求来配置和使用Webpack的各种特性和功能。可以查阅Webpack的官方文档,深入学习和掌握Webpack的更多用法和技巧。 ### 回答3: 要快速使用 webpack,可以按照以下步骤进行: 1. 安装 Node.js:Webpack 是基于 Node.js 的构建工具,因此首先需要在电脑上安装 Node.js。可以去 Node.js 的官方网站下载对应操作系统的安装包,并按照提示进行安装。 2. 初始化项目:在命令行中进入项目的根目录,使用 npm 命令初始化项目。输入 `npm init` 命令,按照提示创建 package.json 文件。 3. 安装 Webpack:在命令行中输入 `npm install webpack webpack-cli --save-dev` 命令,安装 WebpackWebpack-cli。 4. 创建 Webpack 配置文件:在项目根目录下创建一个名为 webpack.config.js 的文件,并在文件中配置项目的入口文件和输出文件等信息。 5. 编写代码:根据项目需求,编写相应的 JavaScript、CSS、HTML 等文件,并在入口文件引入其他模块或资源。 6. 打包文件:在命令行中输入 `npx webpack` 命令,Webpack 将根据 webpack.config.js 中的配置将项目文件打包到指定的输出文件。 7. 运行项目:通过在浏览器中打开生成的 HTML 文件,运行项目,检查打包后的文件是否正常运行。 8. 配置开发环境:为了提高开发效率,还可以配置开发环境,使用 Webpack 提供的 dev server 实时编译和热更新功能。可以在 webpack.config.js 中配置开发环境的相关参数。 通过以上步骤,就可以快速搭建一个基于 Webpack 的项目,并进行开发和打包。当然,Webpack 还有很多其他的功能和配置选项,可以根据需要进一步深入学习和使用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值