webpack深入与实战_技术问答

首页免费课 webpack深入与实战问答

webpack深入与实战

                
                qbaty
            Web前端工程师

                    查看讲师更多课程 
                    qbaty讲师的其他课程
                
Yarn构建工具入门基础
中级·11909
免费课程
                                
                难度中级
            
                时长 3小时21分
            
                学习人数
            
综合评分9.60
                            259人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.5
                                简洁易懂
                            
                                9.5
                                逻辑清晰

全部评论问答未解决精华

不浪漫

接上面，给css-loader那里这样配置：{loader: 'css-loader', options: {importLoaders: 1}}，给postcss-loader那里这样配置：{loader: 'postcss-loader',options: {plugins: function() {return [require('autoprefixer')({broswers:['last 5 versions']})]}}} 卡在这里的同学可以看看。如果不成功拿刀砍我！

2 4-4 处理项目中的 css

2017-05-11

不浪漫

@慕粉2037223669 用这位同学的方法我成功不了。已经卡了几个小时了。今天下午又仔细看了postcss的官网，地址https://www.npmjs.com/package/postcss-loader 这里那个Plugins 的webpack.config.js里给出了大概的样子。幡然悔悟，尼玛这是es6语法写的，然后我给他转换为es5的，按上面配置完就ok。前缀也加上了。没错误了。

1 4-4 处理项目中的 css

2017-05-11

慕粉2242156323

老师声音挺好听的，，，

0 1-1 webpack 基本介绍

2017-05-11

蛋蛋12138

最好安装老师的版本吧，现在很多东西都变了 webpack@1.13.2

1 3-1 自动化生成项目中的html页面(上)

2017-05-10

不加冰的冰淇淋

指定插入的files.chunks.main.entry和 chunks:["a","main"], })是一一对应的
如果生成的页面中插入chunks:["a"] 也就是插入了a 才能使用这个files.chunks.main.entry
视频的例子是生成的a，b，c.html都插入了main和相对应的js 所以可以直接插入main
因为他们体内都有用main。js 这个chunk
如果说插入的是files.chunks.a.entry 那么只有a。html会正常生成因为只有他体内有a。js这个chunk
所以相同应的abc三个js需要做判断才能插入相对应的js

2 3-3 自动化生成项目中的html页面(下)

2017-05-10

不加冰的冰淇淋

chunks不用指定main也可以操作
要把最外层的index。html里面的指定的script文件删掉

1 3-3 自动化生成项目中的html页面(下)

2017-05-10

不加冰的冰淇淋

最大的问题就是格式需要细心些少一个逗号或者少一个等号引号都会造成打包的失败

1 3-2 自动化生成项目中的html页面(中)

2017-05-10

不浪漫

latest (deprecated in favor of env) latest已经被env替代。安装env 命令行输入：npm install babel-preset-env --save-dev。配置起来大概是这个样子：{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}]
]
}

0 4-2 使用 babel-loader 转换 ES6 代码（上）

2017-05-10

不浪漫

babel-loader 很慢！
确保转译尽可能少的文件。你可能在使用 /\.js$/ 来匹配，这样也许会去转译 node_modules 目录或者其他不需要的源代码。

要排除 node_modules，参考文档中的 loaders 配置的 exclude 选项。

你也可以通过使用 cacheDirectory 选项将 babel-loader 提速至少两倍。这将缓存转译的结果到文件系统中

0 4-2 使用 babel-loader 转换 ES6 代码（上）

2017-05-10

不加冰的冰淇淋

filename区别
1.【name】。js
生成的是源文件名称的两个文件夹
【name】-【hash】。js
打包后的文件名就是源文件名加上hash值
源Hash: 6ed8fcb869f32b6d0cf6
生成的是main-6ed8fcb869f32b6d0cf6.js
注意的是这个hash值和文件名hash值相对
【name】-【chunkhash】。js
和上面一样生成的文件名就是源文件名加上hash值
唯一不同的是文件名的hash值和生成的hash值不一样
源Hash: 18a8a031019648cb4892
生成的是main-739dc04ca19361abc6a7.js

4 2-2 webpack配置的 entry 和 output new

2017-05-10

年轻请尽快

啊啊啊好期待webpack下

0 4-7 处理图片以及其他文件

2017-05-10

yam

根目录要新建配置文件 postcss.config.js

内容是：module.exports = {
plugins: [
require('autoprefixer')
]
}

2，webpack.config.js里顶部引入webpack模块

plugins里新建webpack.LoaderOptionsPlugin实例具体怎么写参考慕粉2037223669

3,module属性里的语法参考webpack官网吧https://doc.webpack-china.org/loaders/css-loader/ 视频教程是webpack1的

2 4-4 处理项目中的 css

2017-05-09

年轻请尽快

讲的很好，一直都是往贴合实际的方向去讲。至于讲的是webpack1而不是2的问题，我相信真正想学，认真学的人自然会看相应文档自己补上。在此谢谢老师了

1 4-6 处理模板文件

2017-05-09

不浪漫

六条 QQ 未读消息逼死人！

1 1-2 Webpack 安装和命令行

2017-05-09

不浪漫

在win7 的Git Bash 命令行应该这样输入 webpack hello.js hello.boundle.js --module-bind 'css=style-loader!css-loader' 单引号。本人第一次出错是因为：没删除hello.js 中 require("style-loader!css-loader!./style.css") 的style-loader!css-loader!部分。

2 1-2 Webpack 安装和命令行

2017-05-09

首页上一页 60 61 62 63 64 65 66 下一页尾页

开始学习

课程须知: 1、对模块化开发有一些了解 2、使用过 node 对 npm 有基本的了解 3、对打包有一个基本的概念

老师告诉你能学到什么？: 1、模块化的开发 2、webpack 的 CLI (命令行) 3、webpack 如何在项目中打包 4、webpack 如何处理项目中的资源文件

微信扫码，参与3人拼团

热搜

最近搜索清空

webpack深入与实战