webpack深入与实战_技术问答

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

webpack深入与实战

                
                qbaty
            Web前端工程师

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

全部评论问答未解决精华

qq_小小世界_0

感谢老师和同学

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

2018-01-27

KB_Handler

{
test: /\.css$/,
exclude: /node_modules/,
use: ["style-loader", {loader: "css-loader",options: {importLoaders: 1}}, {
loader: "postcss-loader", options: {ident: "postcss",plugins: (loader) => [require("autoprefixer")()]}
}]
}

2 4-4 处理项目中的 css

2018-01-25

KB_Handler

babel-preset-latest 和 babel-preset-env 恒等，效果一样！官网有写。。。

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

2018-01-25

KB_Handler

module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ["latest"]
}
}
}]
}
// npm install babel-preset-latest

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

2018-01-25

KB_Handler

module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ["env"]
}
}
}]
}
// npm install babel-preset-env

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

2018-01-25

KB_Handler

minify: {
removeComments: true,
collapseWhitespace: true,
minifyJS: true
}

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

2018-01-25

KB_Handler

官网上这个插件html-webpack-inline-source-plugin 确实可以插入源文件，参数用正则表达式。但是还是有弊端！用了这插件，似乎就不能用chunks 了！所以老师这个还是比较好，就是稍微麻烦点。

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

2018-01-24

工具分子

var path =require("path");
module.exports = {
entry:'./src/script/main.js',
output: {

path:path.resolve(__dirname,'./dist/js'),
filename:'bundle.js'

}
}

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

2018-01-24

工具分子

我去，终于知道使用说明的网址在哪里了。。怪我没耐心。

0 1-1 webpack 基本介绍

2018-01-24

工具分子

普通话不错

0 1-1 webpack 基本介绍

2018-01-24

慕标0282539

require('path') 视频中老师讲到这个path是node自带的api，但是我们全程没有安装node啊，关于这个path还是没有明白

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

2018-01-23

慕粉1474327444

讲真的您讲我内容是免费的让我很诧异。真心全是干货。网易云有个wos将的视频，那简直就是坑人的。。。老师666哒

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

2018-01-23

qq_安徒生的夜莺_0

`webpack 3.10.0`下，老师课程中测试用例都可运行，需要参考代码可以看这里：https://github.com/WjmNightingale/webpack-test，如果能帮助学习的小伙伴，可以点个star哟

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

2018-01-23

KB_Handler

方法二：
module.exports = {
entry: "./project/src/scripts/main.js",
output: {
path: __dirname + "/project/dist/scripts/", //处理文件路径为绝对路径
filename: "bundle.js"
}
}

其实吧，也不怪老师！毕竟前端更新变化快，以前可以的方法现在未必就可以了！所以。。。
换个角度想不正是因为这些坑我们才可以更好的理解学到更多吗？

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

2018-01-23

KB_Handler

方法二：
var path = require("path"); //引入nodejs中的path模块
module.exports = {
entry: "./project/src/scripts/main.js",
output: {
path: path.resolve(__dirname, "./project/dist/scripts/"), //处理文件路径为绝对路径
filename: "bundle.js"
}
}

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

2018-01-23

首页上一页 11 12 13 14 15 16 17 下一页尾页

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

webpack深入与实战