webpack深入与实战_技术问答

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

webpack深入与实战

                
                qbaty
            Web前端工程师

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

全部评论问答未解决精华

zen2015

很详细，逻辑性很强，学到很多技巧，希望老师能出webpack 2的教程。感谢，辛苦了。

1 1-1 webpack 基本介绍

2017-04-17

镜心书社

新版本的webpack 的html-webpack-plugin 使用后会直接生成在index.html里

$ webpack -v
2.2.1

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

2017-04-16

Andste

感谢老师，讲得太棒啦

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

2017-04-16

云雀

--display-reasons 代码少个s

1 2-1 建立项目的 webpack 配置文件

2017-04-16

慕婉清5214111

灌水。。。。

0 1-1 webpack 基本介绍

2017-04-16

Miamin

期待最新視頻，希望多一點vue相關的介紹

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

2017-04-16

镜心书社

$ webpack hello.js hello.bundle.js
Hash: 4ca6ba2ec4e4f2ccf343
Version: webpack 2.4.1
Time: 56ms
Asset Size Chunks Chunk Names
hello.bundle.js 2.89 kB 0 [emitted] main
[0] ./style.css 0 bytes {0} [built]
[1] ./world.js 39 bytes {0} [built]

0 1-2 Webpack 安装和命令行

2017-04-15

慕瓜1050258

module.exports={
entry:{
main:"./src/script/main.js",
a:"./src/script/a.js"
},//打包的路口
output:{
//filename:"./dist/bundle.js"//打包的文件名
filename: './dist/[name]-[hash].js'
}
};

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

2017-04-15

慕瓜1050258

module.exports={
entry:{
main:"./src/script/main.js",
a:"./src/script/a.js"
},//打包的路口

output:{
//filename:"./dist/bundle.js"//打包的文件名

filename: './dist/[name].js'
}
};

最后成功的代码

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

2017-04-15

milaiduoduo

讲得很好，全面，有细节，有扩展，思路清晰。谢谢abaty。需要注意的是，由于webpack版本升级的原因，课上某些用法已经不再适用。课上用的是webpack1，现在webpack升级到了webpack2。所以总结一下用法变化（坑），给后面的同学提个醒，主要以下几点：
1、路径变化，webpack2的entry和output需要使用绝对路径，不然报错。
2、loader使用方法的变化：
3、对于在css中需要用到@import时，css-loader和 postcss-loader配置出现变化。
字数所限，整理后，下次贴代码详情。

2017-04-15

王正一

期待多讲一个vue+webpack的内容，受益匪浅！

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

2017-04-15

王正一

怎么突然老师的编辑器主题都变了

2 4-6 处理模板文件

2017-04-15

王正一

postcss在webpack2上需要如下配置：
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
require('autoprefixer')({
broswers: ['last 5 versions']
})
]
}
})
],

0 4-4 处理项目中的 css

2017-04-15