webpack深入与实战_技术问答

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

webpack深入与实战

                
                qbaty
            Web前端工程师

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

全部评论问答未解决精华

package 修改scriprt无效

已采纳回答 / iseeu2018

确认一下你的webpack.config.js 路径正确

1 回答 750 浏览 3-1 自动化生成项目中的html页面(上)

2017-05-13

怎么提供全局接口

最新回答 / 慕粉1467777322

将入口函数用 expor 导出 , 要用到的文件用 inport 导入

1 回答 655 浏览 4-7 处理图片以及其他文件

2017-05-12

sass的坑

最新回答 / 你爱的是星辰大海

使用cnpm install node-sass --save-dev

2 回答 762 浏览 4-5 使用 less 和 sass

2017-05-12

不浪漫

最终不得不建一个 postcss.config.js 再里面配置 module.exports = {plugins:[require('autoprefixer')(//这里可以写上autoprefixer的参数)]} 。而webpack.config.js里不去配置这些内容。而只是在module里写上这些： use: ['style-loader', 'css-loader?importLoaders=1', 'postcss-loader']。这样才成功了。
希望路过看到我留这么多言的朋友能给以指点。我实在不知道为什么他们哪样配置可以而我不行!要！疯了！！我QQ：313357691！！

4 4-4 处理项目中的 css

2017-05-11

不浪漫

我之前的回复因为并没有在common.css里引入flex.css所以我以上的代码是正确的。但是引入了之后，一直报错 Module build failed: Error: Loading PostCSS Plugin failed。因为我想在webpack,config.js里去配置postcss-loader.我吧所有的笔记，评论，问答，以及官网都看使劲的看，就像评论里顶的最高的那个 require到 webpack 而后在plagins里引用webpack.LoaderOptionsPlugind（）的这种方法，我一遍又一遍的删除，一遍又一遍的试验，始终不行。几乎疯了，花了一天时间。

1 4-4 处理项目中的 css

2017-05-11

不加冰的冰淇淋

最新版本2.5.1测试了一下发现的问题
path.resolve(__dirname,'src') 中可以不加__dirname直接'./src'
但是不写在path.resolve里面必须要加__dirname
第二个是写法上面(__dirname,'src') =(__dirname+'src')
关于楼下说用正则和加 __dirname 影响速度的说法
经过测试都是差不多的差值在50ms以内

0 4-3 使用babel-loader 转换 ES6 代码（下）

2017-05-11

不加冰的冰淇淋

2.5.1官网最新文档总结：
1.安装方法 npm install babel-loader babel-core babel-preset-env webpack --save-dev
2.所以后面的参数'由presets: ['latest']相对于的变成了presets: ['env']
3.官方并没有废弃query 也没有指明options是新参数实际测试两种方法都可以生成结果也一模一样
4.loader: 'babel-loader'才能被识别
5.include和exclude需要相对路径，所以include:__dirname +'./src/' 加前缀__dirname

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

2017-05-11

新版本的webpack这种问题怎么解决？

最新回答 / 慕田峪6011835

找到方法了，将inject设置为false即可解决

1 回答 989 浏览 3-1 自动化生成项目中的html页面(上)

2017-05-11

慕田峪6011835

版本变化的太多了

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

2017-05-11

不浪漫

接上面，给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