Webpack的使用

于 2020-08-17 20:04:35 发布
阅读量112 收藏
点赞数 1
文章标签： js vue less react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/death_of_King/article/details/108063191
版权

Webpack的使用

功能

  • 压缩
  • 打包
  • 多种文件的编译
  • 脚手架
  • 生成

基本使用

  • 安装
npm i -g webpack-cli

//进入项目目录，项目初始化
cnpm init -y

  • 配置webpack.config.js

    const path = require('path');

module.exports={
    mode: 'development',
    entry: './src/index.js',
    output: {
        //只能用绝对路径
        path: path.resolve(__dirname,'dest'),
		filename: 'bundle.min.js'
    }
}

Loader

  • 让webpack处理js和json以外的文件

css-loader和style-loader

  • 安装

    cnpm i style-loader css-loader -D

  • 配置webpack.config.js

    const path = require('path');

module.exports={
    mode: 'development',
    entry: './src/js/index.js',
    output: {
        //只能用绝对路径
        path: path.resolve(__dirname,'dest'),
		filename: 'bundle.min.js'
    },
    module: {
        rules: [
            {test: /\.css$/i, use: ['style-loader','css-loader']}
        ] 
	}
}

postcss-loader和autoprefixer

  • 自动补全浏览器前缀

    cnpm i autoprefixer postcee-loader -D
    • postcss-loader：让webpack解析、处理css文件的loader
    • autoprefixer：自动根据浏览器支持情况，补全前缀(>5%支持原则)
    • autoprefixer不是loader，是插件——用于增强浏览器的功能，而非直接参与文件的处理

  • 配置webpack.config.js

const path = require('path');

module.exports={
    mode: 'development',
    entry: './src/js/index.js',
    output: {
        //只能用绝对路径
        path: path.resolve(__dirname,'dest'),
		filename: 'bundle.min.js'
    },
    module: {
        rules: [
            {test: /\.css$/i, use: [
                'style-loader',
                'css-loader', 
                //'postcss-loader'
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: [
                            require('autoprefixer')
                        ]
                    }  
                }
            ]}
        ] 
	}
}

file-loader和url-loader

  • 将文件编译到js中（包括直接引入和css中的引入，图片和字体文件等）

  • npm i file-loader url-loader -D

  • file-loader：让webpack能处理文件

  • url-loader：包含file-loader的功能，可以把文件转换成dase64（dataurl）形式

  • url-loader可以单独使用，但必须下载file-loader，否则无法正常使用

  • webpack.config.js

    const path = require('path');

module.exports={
    mode: 'development',
    entry: './src/js/index.js',
    output: {
        //只能用绝对路径
        path: path.resolve(__dirname,'dest'),
		filename: 'bundle.min.js'
    },
    module: {
        rules: [
            //css
            {test: /\.css$/i, use: ['style-loader', 'css-loader']},
            
            //图片
            /*{test: /.(jpg|png|gif)$/i, use: {
                loader: 'file-loader',
                options: {
                    outputPath: 'imgs/',   //相对于output.path
                    publicPath: 'dest/imgs' //输出到css的路径
                }
            }}*/
            
            {test: /.(jpg|png|gif)$/i, use: {
                loader: 'url-loader',
                options: {
                    outputPath: 'imgs/',   //相对于output.path
                    publicPath: 'dest/imgs', //输出到css的路径
                    limit: 4*1024
                }
            }},
            
            //字体文件
            {test: /\.eot|svg|ttf|woff2/i, use: {
                loader: 'url-loader',
                 outputPath: 'fonts/',   //相对于output.path
                 publicPath: 'dest/fonts', //输出到css的路径
                 limit: 4*1024 
            }}
        ]
	} 
};

less-loader和babel-loader

  • 安装

    cnpm i less-loader less -D
cnpm i babel-loader @babel/core @babel/preset-env

  • webpack.config.js

    const path = require('path');

module.exports={
    mode: 'development',
    entry: './src/js/index.js',
    output: {
        //只能用绝对路径
        path: path.resolve(__dirname,'dest'),
		filename: 'bundle.min.js'
    },
    module: {
        rules: [
            {test: /\.css/i, use: ['style-loader', 'css-loader', 'less-loader']},
            {test: /\.(js|jsx)/i, use: {
                loader: 'babel-loader',
                options: {
                    preset: ['@babel/preset-env']
                }
            }}
        ]
    },
    //开发工具，用于调试
    devtool: 'source-map'
};

dev-server和webpack双配置

用于启动开发服务器

  • 提供网络环境——cookie等

  • 热更新

  • 安装

    cnpm i webpack webpack-cli webpack-dev-server -D

  • packeage.json

    {
    ...
    "scripts": {
        "start": "webpack-dev-server"
    }
}

  • 运行

    nm run start

  • 修改html引用

    <script src="/bundle.js" charset="utf-8"></scripts>

  • 开发和生产两套配置

    • packeage.json

      {
    ...
    "scripts": {
        "start": "webpack-dev-server --open",
        "build": "webpack --env.production"
    }
}

    • webpack.config.js

      const path = require('path');

module.exports = function (env, argv) {
    env = env||{development: true};
    
    return {
         entry: './src/js/index',
         module: {
        	rules: [
            //css
            {test: /\.css$/i, use: ['style-loader', 'css-loader']},
            {test: /.(jpg|png|gif)$/i, use: {
                loader: 'url-loader',
                options: {
                    outputPath: 'imgs/',   //相对于output.path
                    
                    //publicPath: 'dest/imgs'
                    limit: 4*1024
                }
            }}
          ]
        },
        
        ...env.production ? require('./config/webpack.production') : require('./config/webpack.development')
    }
};

    • config/webpack.development.js

      const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
    mode: 'development',
    output: {
		filename: 'bundle.js'
	}
    plugins: [
        new HtmlWebpackPlugin({
           template: path.resolve(__dirname,'../index.html')
        });
    ]
}；

    • config/webpack.production.js

      const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
    mode: 'production',
    output: {
		//只能用绝对路径
        path: path.resolve(__dirname,'../build'),
		filename: 'bundle.min.js'
	},
    plugins: [
        new HtmlWebpackPlugin({
           template: path.resolve(__dirname,'../index.html')
        });
    ]
};

    • 安装html-webpack-plugin操作HTML

      npm i html-webpack-plugin

代码质量管理-eslint

  • 安装

    npm i eslint eslint-loader -D

  • webpack配置

    const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/js/index',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {test: /\.(js|jsx)$/i, 
             loader: 'eslint-loader',
             //排除
             exclude: /node_modules|bower_modules/,
             options: {
                 
             }
            }
        ]
    }
};

  • 配置eslint

    node node_modules/eslint/bin/eslint.js --init

  • 或添加配置package.json

    "scripts": {
    "eslint_init": "eslint --init"
}

//执行
npm run eslint_init

代码测试-jest

  • js测试框架，https://jestjs.io/

    npm i jest jest-webpack -D

  • 添加scripts

    "scripts": {
	...
	"test": "jest-webpack"
}

  • 执行测试

    npm run test

  • 测试文件

    //path=/src/js/1.js
export function fab(n) {
    if(n == 1 || n == 2) {
        return 1;
    }else {
        return fab(n-1)+fab(n-2);
    }
}

  • 新建 tests/index.test.js

    const {fab} = require('../src/js/index');

//测试项(test)
test('fab 1~9', ()=>{       
    //expect(fab(3)).toBe(2);  
    let arr = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34];
    arr.forEach((item, index)=>{
        if(index < 1) return;
        expect(fab(index)),toBe(item); 
    });
});

//测试项(test)
test('fab 3', ()=>{       
    expect(fab(3)).toBe(2)
});

Webpack 完整配置

安装模块

  • webpack类
    • webpack webpack-cli webpack-dev-server
  • 样式类
    • css-loader style-loader
    • postcss-loader autoprefixer
    • less-loader less
  • 文件类
    • file-loader url-loader
  • ES6编译
    • babel-loader @babel/core @babel/preset-env
  • HTML生成
    • html-webpack-plugin
  • 代码质量
    • eslint eslint-loader
    • stylelint stylelint-webpack-plugin stylelint-config-standard
  • 测试
    • jest jest-webpack

目录结构

congfig/		#配置
	webpack.production.js		#生产配置——build
	webpack.development.js		#开发配置——start
	webpack.test.js				#测试配置——test
	
src/			#源码
	js/
    	index.js	#主文件
	less/
	css/
	imgs/
	fonts/
	
tests/				#测试用例
webpack.config		#通用配置
.eslintrc.js		#代码风格配置（eslint）
index.html

配置

  • 初始化eslint

    node node_modules/eslint/bin/eslint --init

  • package.json

    // package.json



{
    "scripts": {
        "start": "webpack-dev-server --env.development --open",
        "build": "webpack --env.productin",
        "test": "jest-webpack",
    }
    ...
    "browserlist": [
        "> 0.5%",
        "last 1 version",
        "not dead"
    ]
    "stylelint": {
        "extends": "stylelint-config-standard"
    },
    "jest": {
        "roots": [
            "./tests/"
        ]
    }
}

  • webpack.config.js

    const path = require('path');
const StyleLintPlugin = require('stylelint-webpack-plugin');

module.export = function (env, argv) {
    env = env || {};
    let conf = null;
    if(env.production){
        conf = require('./config/webpack.production');
	}else if(env.test) {
        conf = require('./config/webpack.development');
	}else {
        conf = require('./config/webpack.test');
	}
    
    return {
        entry: './src/js/index',
        module: {
            rules: [
                //js
                {test: /\.(js|jsx)$/i, use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }, {
                    loader: 'eslint-loader',
                    options: {
                        exclude: /node_nodules|bower_modules/
                    }
                }
                }]},
                
                //css
                {test: /\.css$/i, use: ['style-loader', 'css-loader',{
                    loader: 'postcss-loader',
                    options: {
                        plugins:[
                            require('autoprefixer');
                        ]
					}
                }]},
                
                //less
                {test: /\.less$/i, use: ['style-loader', 'css-loader', 'less-loader']},
                //imgs
                {test: /\.(png|jpg|gif)$/i, use: {
                    loader: 'url-loader',
                    options: {
                        outputPath: 'imgs/'.
                        limit: 4 * 1024
                    }
                }},
                
                //fonts
                {test: /\.(eot|svg|ttf|woff|woff2)$/i, use: {
                    loader: 'url-loader',
                    options: {
                        outputPath: 'fonts/',
                        limit: 4 * 1024
                    }
                }}
            ]
		}
        
        ...conf;
	};
};

  • webpack.development.js

    const path = require('path');
const StyleLintPlugin = require('style-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    output： {
 		filename: 'bundle.js'	   
	},
    plugins: [
        new StyleLintPlugin({
            files: ['**/*.css','**/*.less','**/*.htm','**/*.html','**/*.cvue','**/*.scss',]
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../index.html')
        })
    ],
    devtool: 'source-map'
}

  • webpack.production.js

    const path = require('path');
const StyleLintPlugin = require('style-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'production',
    output： {
    	path: path.resolve(__dirname, '../buile'),
 		filename: 'bundle.min.js'	   
	},
    plugins: [
        new StyleLintPlugin({
            files: ['**/*.css','**/*.less','**/*.htm','**/*.html','**/*.cvue','**/*.scss',]
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../index.html')
        })
    ]
};

  • webpack.test.js

    const path = require('path');
const StyleLintPlugin = require('style-webpack-plugin');

module.exports = {
    mode: 'development',
    output： {
 		filename: 'bundle.js'	   
	},
    plugins: [
        new StyleLintPlugin({
            files: ['**/*.css','**/*.less','**/*.htm','**/*.html','**/*.cvue','**/*.scss',]
        })
    ]
};

Vue2.0 templeate

npm i
webpack css-loader
vue vue-loader vue-style-loader vue-html-loader vue-template-compiler
babel-loader @babel/core @babel/preset-env

  • vue-loader：用于编译vue组件

  • vue-style-loader：编译vue组件中的style

  • vue-html-loader：编译vue组件中的html

  • webpack.config.js

    const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = function(env, argv) {
    
    ...
    
    return {
        entry: './src/js/index',
        module: {
            rules: [
                
                ...
                {test: /\.css$/i, use: ['vue-style-loader', 'css-loader',{
                    loader: 'postcss-loader',
                    options: {
                        plugins:[
                            require('autoprefixer');
                        ]
					}
                }]},
                
                {test: /\.vue$/i, use: 'vue-loader'},
                
                resolve: {
                	//别名
                	alias: {
                		'vue': 'vue/dist/vue.esm'
                		'@': path.resolve(__dirname, './src/js/')
                	}
				}
                
            ]
        }
    };
};

  • webpack.development.js 、webpack.production.js、webpack.test.js

    const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    
    ...
    
    plugins: [
        ...
        new VueLoaderPlugin();
    ]
};

Vue-cli脚手架

  • 包含常用的vue工程模板，可以快速启动一个项目

  • 安装

    npm i vue-cli -g

  • 列出模板

    vue list

  • 创建项目

    vue init <模板> <目录>

  • 工程目录

参考课程连接

槐序&清和
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值