webpack深入与实战_技术问答

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

webpack深入与实战

                
                qbaty
            Web前端工程师

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

全部评论问答未解决精华

权丶

求老师的package.json文件啊，版本不对，各种报错

0 4-4 处理项目中的 css

2017-10-07

Maizi93

webpack 3.6.0版本
module:{
loaders:[
{
test: /\.js$/,
loader: 'babel-loader',
exclude: __dirname + '/node_modules/',
include: __dirname + '/src/',
query: {
presets: ['latest']
}
}
]
}

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

2017-10-03

Maizi93

webpack 3.6.0版本：

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

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

2017-10-03

i_BY

在使用exclude时，参数配置如下：
exclude: ['/node_modules']
这样才是node_modules的绝对路径

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

2017-10-01

i_BY

webpack3以上的loader的配置如下：
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
'presets': ['env']
}
}
]
}

需要注意的是：要安装env，安装方法：npm install --save-dev babel-preset-env

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

2017-10-01

xvrzhao

如果你的webpack不是全局安装的，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址，继续上面的例子，在终端中输入如下命令

# webpack非全局安装的情况
node_modules/.bin/webpack hello.js hello.bundle.js

2 1-2 Webpack 安装和命令行

2017-09-30

i_BY

output这样配置就不会报错：
module.exports = {
entry: './src/script/main.js',
output: {
path: __dirname + '/dist/js',
filename: 'bundle.js'
}
}

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

2017-09-30

mop18mop183811015

唯一的地方注意下：安装file-loader的版本
cnpm i --save-dev file-loader@0.9.0

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

2017-09-30

mop18mop183811015

安装node-sass
{test:/\.(css|less|scss)$/,
//loader:'style!css!postcss'//
use:['style-loader','css-loader',
{loader:'postcss-loader',
options:{
plugins:[require('postcss-import'),require('autoprefixer')],
browser:['last 5 versions']
}
},'less-loader','sass-loader'
]
}

0 4-5 使用 less 和 sass

2017-09-29

果酒柠檬子

layer啥时候加的？

0 4-4 处理项目中的 css

2017-09-29

mop18mop183811015

新版本测试有效：
{test:/\.css$/,
//loader:'style-loader!css-loader'//从右到左解析
use:['style-loader','css-loader',
{
loader:'postcss-loader',
options:{
plugins:[require('postcss-import'),require('autoprefixer')],
browser:['last 5 versions']
}
}
]
}

2 4-4 处理项目中的 css

2017-09-29

qq_我等_03752597

may only appear at the top level (8:0) webpack打包出错，提示这个，怎么回事啊？谢谢

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

2017-09-29

饼bing

老师你最棒

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

2017-09-28

饼bing

Mac 用户在 npm前加 sudu

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

2017-09-28

qq_起飞_0

老师的声音，非常清晰非常好听。

0 1-1 webpack 基本介绍

2017-09-28

首页上一页 29 30 31 32 33 34 35 下一页尾页

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

webpack深入与实战