2018年1月 Webpack笔记

最新推荐文章于 2021-09-21 18:14:25 发布

转载最新推荐文章于 2021-09-21 18:14:25 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/linuxOS/p/8321930.html

本文详细介绍了如何使用Webpack进行项目打包，包括配置环境、编写入口文件、使用各种loader和plugin，以及如何处理不同类型的资源文件，如JS、CSS、HTML、图片等。

1、学习途径：慕课网《webpack深入与实战》

2、环境

MAC系统、终端shell、nodejs

切换到项目夹中

npm init

根据提示输入项目名称、描述、入口文件等。

新建hello.js文件

function hello(str){
    alert(str);
}
hello('1234');

用Webpack打包文件

webpack hello.js hello.bundle.js

将hello.js 编译成浏览可以兼容的JS代码

const path = require('path');  //   nodejs 引入模块 NODJS自带
var HtmlWebpackPlugin = require('html-webpack-plugin'); //npm install html-webpack-plugin --save-dev  手动安装


module.exports = {
    entry: './src/app.js',      //引入文件
    output:{
        path: path.resolve(__dirname,'./dist'),  //输出目录
        filename: "js/[name]_bundle.js"　　　　　　//输出文件
    },
    module: {    //模块，处理项目中不同信息的模块
        rules:[　　//匹配请求规则数组
            {
                test: /\.js$/,  //正则请求类型
                loader:'babel-loader',   //处理模型
                include: path.resolve(__dirname,'src'),   //处理目录
                exclude: path.resolve(__dirname,'node_modules'),   //排除目录
                query:{
                    presets:['env']
                }
            },
            {
                test: /\.(css|less|sass)$/,
                use:[
                        'style-loader',
                        'css-loader',
                        'less-loader',
                        'sass-loader',
                        { 
                            loader: 'postcss-loader', //格式化CSS 加兼容前缀
                            options:{ 
                                plugins: [require('postcss-import'),require('autoprefixer')],
                                browser:['last 5 versions']
                                }
                        }

                ]
            },
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader'
                }
            },
            {
                test: /\.tpl$/,
                loader:'ejs-loader'
            },
            {
                test: /\.(png|jpg|gif)$/i,
                loaders: [
                    'url-loader?limit=10000&name=assets/[name]-[hash:5].[ext]',
                    'image-webpack-loader'
                ]
            }
        ]
    },
    plugins: [   //插件
        new HtmlWebpackPlugin({   //HTML模块引擎
            filename: 'index.html',  //输出文件
            template: 'index.html',　　//模块文件
            inject: 'body',　　　　//JS插入位置
            title: 'webpack is a'  //模块数据
        })
    ]

}