26.webpack 入门

Posted 飞刀还问情

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了26.webpack 入门相关的知识,希望对你有一定的参考价值。

webpack

官方:

https://webpack.js.org/
http://webpack.github.io/

中文:

https://www.webpackjs.com/

资料:

https://segmentfault.com/a/1190000006178770


学习入口:

官网----->1 中文文档-->指南
?????2 立即开始
-------------------------------------------------------------

安装webpack:

1、3.x

安装 cnpm i -D [email protected]
卸载 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

























以上是关于26.webpack 入门的主要内容,如果未能解决你的问题,请参考以下文章

Atom编辑器入门到精通 Atom使用进阶

Cg入门20:Fragment shader - 片段级模型动态变色(实现汽车动态换漆)

Cg入门19:Fragment shader - 片段级模型动态变色

Cg入门16:Fragment shader - 片段级光照

Atom编辑器入门到精通 Atom使用进阶

Atom编辑器入门到精通 Atom使用进阶