26.webpack 入门

webpack

学习入口：

官网----->1 中文文档-->指南

2 立即开始

安装webpack:

1、3.x

安装 cnpm i -D webpack@3.8.1

卸载 npm un -D webpack

2、4.x

安装 cnpm i -D webpack webpack-cli

局部安装验证版本：

webpack -v 错误 —— 全局安装

1、node_modules/.bin/webpack -v

2、npx webpack -v

3、工程文件 package.json

"scripts": {
	    "test": "webpack -v"
	 },
运行npm run test

webpack3 翻译器 ES6-->ES5 babel

webpack src dist

npx webpack js/index.js dist/index.bundle.js

文件不会被压缩！

webpack4 翻译器 ES6-->ES5 babel

webpack --mode=development src -o dist 正确的格式

npx webpack --mode=development js/index.js dist/index.bundle.js --->main.js

npx webpack --mode=development js/index.js --output dist/index.bundle.js

文件会被压缩！

简写:webpack --mode=development

前提条件：

1、源src 必须是 src/index.js

输出：默认 dist/main.js

配置文件：　webpack.config.js

执行：webpack

指定执行某一个具体的文件：必须带上 --config

webpack --config webpack.dev.config.js

loader:处理资源从右往左进行处理

cnpm i -D style-loader css-loader

css-loader：加载css文件

style-loader：处理样式页面生成style标签

sass:

cnpm i -D sass-loader node-sass

less:

cnpm i -D less-loader less

cnpm i -D url-loader file-loader

file-loader：处理文件单纯的把文件复制到目标路径重命名

url-loader 依赖 file-loader :把文件转成base64

exp:


module.exports = {
    mode:"development",
    entry:"./src/index.js", //引入模块 ./
    output:{
        path:`${__dirname}/dist/`,  //必须是一个绝对路径
        filename:"index.bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
             },
             //sass
            {
                test: /\.scss$/,
                use: ['style-loader','css-loader','sass-loader']
            },
            //less
            {
                test: /\.less$/,
                use: ['style-loader','css-loader','less-loader']
            },
            {
                test: /\.(png|jp(e)?g|gif)$/,
                use: ["url-loader"]
              }
        ]
    }
}

model:{ 模块、包
		rules:[ //规则
				{test:/正则/，use:[xxxx-loader]}  use:使用什么
loader进行处理
		]
}
indes.js
import $ from "jquery";
import "./asset/1.css";
import img from "./asset/111.jpg"
$(function(){
    $("#div1").click(function(){
        //$(this).addClass("active");
        // alert(img);
        $(this).css({
            width:"330px",
            height:"495px",
            background:`url(${img})`
        });
    });
});

res:

生成页面 index.html

cnpm i -D html-webpack-plugin

new HtmlWebpackPlugin()

new HtmlWebpackPlugin({
    //title: 'My App',
    template: 'public/index.html',用户模板文件
    filename: 'index.html',  生成的页面   可以不写  默认就是index.html
    hash:true  防止js/css缓存
})

ExtractTextWebpackPlugin 在 webpack4中被废弃替换者 mini-css-extract-plugin

cnpm i -D mini-css-extract-plugin

mini-css-extract-plugin++应用场景只在开发阶段++！

++在生产阶段换成 style++

--watch 简写 -w 实时编译问题不能主动刷新页面

webpack-dev-server 服务器

不能实时编译，可以实时刷新页面

cnpm i -D webpack-dev-server

webpack.config.js

const webpack = require('webpack');
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//  webpack --mode=development src/index.js  --output dist/main.js
module.exports = {
    mode:"development",
    entry:"./src/index.js",//模块 ./
    output:{
        path:path.resolve(__dirname,"dist"),//绝对路径
        filename:"main.js"
    },
    devServer: {
        contentBase: "./dist", //资源目录 www/public
        index: 'main.js',
        host:"localhost",
        port:9000,
        open:true,// --open
        hot: true,
        compress: true,  //gzip压缩
        // proxy: {
        //     '/api': {
        //     target: 'https://other-server.example.com',
        //     secure: false
        //     }
        // }
    },
    module: {
        rules: [
            // { test: /\.css$/, use: ["style-loader","css-loader"] },
            {
                test: /\.css$/,
                use: [
                  MiniCssExtractPlugin.loader,
                  "css-loader"
                ]
            },
            { test: /\.(png|jp(e)?g|gif|svg|icon)$/,use: ["file-loader"] },
        ]
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.BannerPlugin('版权所有，翻版必究'),
        //new HtmlWebpackPlugin()
        new HtmlWebpackPlugin({
            template: 'public/index.html',
            filename: 'index.html',
            hash:true
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ]
}

css/url/file/babel/vue-loader

css分离（mini-css-extract-plugin）

HtmlWebpackPlugin

HtmlWebpackPlugin —— Clean...

babel