webpack深入与实战_技术问答

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

webpack深入与实战

                
                qbaty
            Web前端工程师

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

全部评论问答未解决精华

慕工程7433556

webpack打包出错看这里！！
const path = require('path');
module.exports={
entry:'./src/script/main.js',
output:{
path:path.resolve(__dirname, 'dist/js'),
filename:'bundle.js'
}
}

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

2017-10-23

syy138

这个老师做的视频，是当前慕课网我遇到最好的！如果有出售高级参杂项目的课程，可以买买看。

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

2017-10-23

fanfan328

webpack 2.0 的配置文件可以这样写，不会报错：
var path= require('path')

module.exports ={
entry:'./src/script/main.js',
output:{
path:path.resolve(__dirname,'./dist/js/'),
filename:'bundle.js'
}
}

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

2017-10-23

qq_挺哥_0

其中可能遇到的问题：在配置完npm的全局模块的存放路径（npm config set prefix “d:\nodejs\node_global”）之后，你会开始设置此环境变量：D:\nodejs\node_global\node_modules，你会发现你最初的新建的node_global下没有此文件。
没关系，你先全局安装webpack（npm install webpack -g）你就会发现，已经创建好了node_modules。按照我之前发的那个评论里的链接操作，基本就没啥问题啦。QAQ

1 1-2 Webpack 安装和命令行

2017-10-22

qq_挺哥_0

仅在windows上的测试，webpack不是命令的解决方法：你还没给你的npm建立环境变量，你安装的webpack和express框架都不能用作命令哦，具体配置npm环境变量如下链接操作即可：http://www.cnblogs.com/WhiteCusp/p/4200220.html，弄了一个下午，亲测这个方法有效。

1 1-2 Webpack 安装和命令行

2017-10-22

屁哥0

less文件里的都加不上浏览器前缀，css里的@import引用的加上拉，直接写common.css里的也没加上浏览器前缀

0 4-5 使用 less 和 sass

2017-10-22

Tiboo

var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {main: './src/script/main.js', a: './src/script/a.js' },
output:{ path: __dirname+'/dist/', filename: 'js/[name].js' },
plugins:[
new htmlWebpackPlugin({
template:'index.html'
})
]
}

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

2017-10-21

qq_直走_0

//entry是一个对象
module.exports={
entry:{
main:'./src/js/test.js',
a:'./src/js/testtwo.js'
},
output:{
path: __dirname + '/dist/js',
filename:'[name].js'
}
}

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

2017-10-21

qq_直走_0

module.exports={
entry:'./src/js/test.js',
output:{
path: __dirname + '/dist/js',
filename:'bundle.js'
}
}

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

2017-10-21

Villen

老师的讲解很到位，整体的把握很好，大概什么时候会更新呀～

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

2017-10-20

驭梦

使用sass的童鞋需要先安装好node-sass和sass-loader，然后酱紫就可以
{
test:/\.scss$/,
loader:"style-loader!css-loader!sass-loader"
}

0 4-5 使用 less 和 sass

2017-10-20

幻神魔域

老师的browsers：['last 5 version'];那里是拼错了吗

0 4-4 处理项目中的 css

2017-10-20

幻神魔域

ms是微软的ie的前缀，不是mozilla的firefox的，老师说错了，在16分钟的时候

2 4-4 处理项目中的 css

2017-10-20

驭梦

module:{
loaders:[
{
test:/\.css$/,
loaders:["style-loader","css-loader",{
loader:"postcss-loader",
options:{
plugins:[require('postcss-import'),require('autoprefixer')],
browser:['last 5 versions']
}
}]
}
]
}

4 4-4 处理项目中的 css

2017-10-20

驭梦

我之前的写法是：
exclude:__dirname+'/node_modules'
include:__dirname+'/src'
用时517ms

采用path.resolve之后：
exclude:path.resolve(__dirname,'/node_modules')
include:path.resolve(__dirname,'/src')
用时389ms

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

2017-10-20

首页上一页 24 25 26 27 28 29 30 下一页尾页

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

webpack深入与实战