webpack深入与实战_学习笔记

首页免费课 webpack深入与实战笔记

webpack深入与实战

                
                qbaty
            Web前端工程师

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

最热最新

雪豹1993

babel官网：
https://babeljs.io/setup#installation
babel中文网：
https://www.babeljs.cn/

查看全部

0 采集收起来源：使用 babel-loader 转换 ES6 代码（上）
2020-01-30

雪豹1993

// 生成多个html
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js',
        a: './src/a.js',
        b: './src/b.js',
        c: './src/c.js',
    },
    output: {
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'http://cdn.com'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: 'a.html',
            // html标题
            title: 'this is a.html',
            // 模板
            template: 'index.html',
            inject: 'head',
            // 引用的js
            chunks: ['a']
            // minify: {
            //     removeComments: false,
            //     collapseWhitespace: false
            // }
        }),
        new HtmlWebpackPlugin({
            filename: 'b.html',
            title: 'this is b.html',
            template: 'index.html',
            inject: 'head',
            chunks: ['b']
            // minify: {
            //     removeComments: false,
            //     collapseWhitespace: false
            // }
        }),
        new HtmlWebpackPlugin({
            filename: 'c.html',
            title: 'this is c.html',
            template: 'index.html',
            inject: 'head',
            chunks: ['c']
            // 压缩
            // minify: {
            //     removeComments: false,
            //     collapseWhitespace: false
            // }
        })
    ],
};

查看全部

0 采集收起来源：自动化生成项目中的html页面(下)

2020-01-30

雪豹1993

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management',
            inject: 'head',
            // 压缩
            minify: {
                // 删除注释
                removeComments: true,
                // 去除空格
                collapseWhitespace: true
            }
        })
    ],
    output: {
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'http://cdn.com'
    }
};

查看全部

1 采集收起来源：自动化生成项目中的html页面(中)

2020-01-22

雪豹1993 13:48

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management',
            inject: 'head'
        })
    ],
    output: {
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        // 可以为生产环境地址，执行npm run build命令之后，dist目录下 index.html中的js路径会加上这个前缀
        publicPath: 'http://cdn.com'
    }
};

查看全部

0 采集收起来源：自动化生成项目中的html页面(中)

2020-01-22

雪豹1993

自动化生成项目中的html页面

npm install --save-dev html-webpack-plugin

参考网址：

（1）webpack插件列表：

https://www.webpackjs.com/plugins/，

（2）htmlWebpackPlugin插件介绍：

https://www.webpackjs.com/plugins/html-webpack-plugin/

（3）htmlWebpackPlugin插件配置：

https://github.com/jantimon/html-webpack-plugin#configuration

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    output: {
        // 加上js，可以使js和html分离开来
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

查看全部

0 采集收起来源：自动化生成项目中的html页面(上)

2020-01-22

雪豹1993

参考网址：https://www.webpackjs.com/guides/output-management/

index.html

<!doctype html>
<html>
<head>
    <title>Output Management</title>
</head>
<body>
    <script src="./app.bundle.js"></script>
</body>
</html>

index.js

import _ from 'lodash';
import printMe from './print.js';

function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;
    element.appendChild(btn);

    return element;
}

document.body.appendChild(component());

webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

print.js

export default function printMe() {
    console.log('I get called from print.js!');
}

// 清理输出目录

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

查看全部

0 采集收起来源：webpack配置的 entry 和 output new

2020-01-22

雪豹1993 08:30

package.json配置脚本

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.dev.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.4.2",
    "style-loader": "^1.1.3",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "lodash": "^4.17.15"
  }
}

查看全部

0 采集收起来源：建立项目的 webpack 配置文件

2020-01-22

雪豹1993
// 指定config文件
```
webpack --config web.dev.config.js
```
或
```
npx webpack --config webpack.dev.config.js
```
查看全部

0 采集收起来源：建立项目的 webpack 配置文件
2020-01-22

雪豹1993

// webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            // 加载css
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            // 加载图片
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            // 加载字体
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
};

查看全部

0 采集收起来源：建立项目的 webpack 配置文件

2020-01-22

雪豹1993

//加载 CSS
npm install --save-dev style-loader css-loader
npm run build

参考网址：https://www.webpackjs.com/guides/asset-management/

查看全部

0 采集收起来源：Webpack 安装和命令行

2020-01-21

雪豹1993

npm init -y
npm install webpack webpack-cli --save-dev
npx webpack

参考网址：https://www.webpackjs.com/guides/getting-started/

查看全部

0 采集收起来源：Webpack 安装和命令行

2020-01-21

tp_ysu

<%= %> 有等号直接取值，没有等号直接运行js代码

查看全部

0 采集收起来源：自动化生成项目中的html页面(中)
2020-01-15
大手碎脑

css-loader使得webpack可以识别css文件
style-loader可以把生成一个style标签并把css样式插入进style标签里面

查看全部

1 采集收起来源：Webpack 安装和命令行
2019-11-27
pinzaghi 02:11

webpack命令
webpack hello.js hello.bundle.js

查看全部

0 采集收起来源：Webpack 安装和命令行
2019-10-26
qq_remember_26

webpack.config.js配置：
module.exports={
    entry: './src/script/main.js', // 打包的入口文件
    output: { // 打包后的文件
        path: './dist/js', // 地址
        filename: 'bundle.js' // 打包的文件名称
}
}

查看全部

0 采集收起来源：建立项目的 webpack 配置文件
2019-09-23

首页上一页 3 4 5 6 7 8 9 下一页尾页

0/150

提交

取消

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

webpack深入与实战