NPM 和webpack 的基础使用

NPM 的基本使用

npm i (安装)

npm i -g （全局安装）

npm i -g jquery -S 生产环境

npm i jquery -D 开发模式

WebPack 的使用

初始化项目 进入项目文件中

npm init -y 初始化一个项目文件夹

安装webpack到开发环境 三个内容

npm i -g webpack webpack-cli webpack-dev-server -D

• 在项目文件中创建 src 目录 src > index.js 创建入口文件
• 打包没有配置配置文件的情况下 打完包会在项目下生成dist文件夹 下面会有 main.js 入口文件
  • node dist/main 可以运行项目 也可以在html中用<script src="dist/main.js"></script>引入使用

webpack —mode development //开发环境

webpack —mode production //生产环境

• 安装使用html 插件

npm i html-webpack-plugin -D

• 安装 css 插件

npm i css-loader style-loader -D

• 安装打包css到独立文件的插件

npm i -D mini-css-extract-plugin

• css兼容处理

  • 安装资源 npm i postcss-loader postcss-preset-env -D

  • 项目文件夹下创建 postcss.config.js

    
    module.exports = {
        plugins: [
            require('postcss-preset-env')()
        ]
    }
    

  • 项目文件夹下的 package.json中添加

       ```javascript

    “browserslist”: [

    
    "> 0.2%",
    "last 2 versions",
    "not dead"
    

    ]

       ```

• 处理图片 npm i url-loader file-loader html-withimg-loader -D

  • 处理css中的图片 直接用url()方法

    
    #div{
        background-image:url("../image/1.png")
    }
    

  • html中使用图片 需要安装 html-withimg-loader

• 压缩CSS npm install css-minimizer-webpack-plugin -D

• Less需要使用npm下载less包和less-loader

• Sass需要使用npm下载node-sass包和sass-loader

  npm i node-sass sass-loader -D

  注意 创建sass文件时 是创建 index.scss

//在需要打包的 js 中引入样式 此处为cart.js
require('./base.css');   // 引入css样式
require('./eduwork.css');   // 引入css样式
require('./index.css');   // 引入css样式
require('./list.css');   // 引入css样式
require('./info.css');   // 引入css样式
require('./cart.css');   // 引入css样式
require("./index.scss");  //引入sass

• 配置文件

在项目目录下 手动创建 webpack.config.js 为webpack的配置文件

var {resolve} =require('path');
//引用html 插件
var htmlWebpackPlugin = require("html-webpack-plugin");
//引入打包css到独立文件的插件
var miniCssExtractPlugin=require('mini-css-extract-plugin');
//引入压缩css插件
var cssMinimizerWebpackPlugin =  require('css-minimizer-webpack-plugin');
module.exports = {
    //打包开始的入口文件
    //可以是单个
    //entry:"./src/index.js",
    //也可以是多个(数组) 会打包在一个入口文件中
    //entry:["./src/index.js","./src/index2.js"]
    //还可以是对象模式 这时会生成多个入口文件main.js和index.js
    entry: {
        index: "./src/index.js"
    },
    //打包后路径
    output: {
        //输出的入口文件名 单个入口
        //"filename":"main.js",
        //输出的入口文件名 多个入口
        "filename": "[name].js",
        //打包后的文件夹名
        "path": resolve(__dirname, 'dist')
    },
    plugins: [
        //使用html插件
        new htmlWebpackPlugin({
            //使用的html文件
            template: "./src/index.html",
            //输出的html文件名
            filename: "index.html",
            //可以 在输出的index.html 中引用指定js 对应entry 中的key
            chunks: ['index'],
            minify: {
                //移除空格
                collapseWhitespace: true,
                //移除注释
                removeComment: true
            },
        }),
        //创建 打包css到独立文件夹下的插件 对象
        new miniCssExtractPlugin({
            filename:'css/[name].css'   //输出的css文件名，放置在dist/css目录下
        }),
        //创建 压缩css 对象
        new cssMinimizerWebpackPlugin()
    ],
    module: {
        rules: [
            //处理css
            {
                // 正则表达式，表示.css后缀的文件
                test: /\.css$/,
                // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
                use: [
                    //css打包成独立文件
                    {
                        loader: miniCssExtractPlugin.loader
                    } ,
                    //css处理插件
                    'css-loader',
                    //css兼容性处理
                    'postcss-loader'
                ]

                // use: ['style-loader','css-loader']    //style-loader类似打包到html中
            },
            //处理图片
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [

                    {
                        loader: 'url-loader',
                        options: {
                            // publicPath: './img/', //会在html的地址前加上这个
                            outputPath: 'img/',
                            limit: 1024 * 8,
                            name:'[name][hash:8].[ext]',
                            esModule: false
                        }
                    }
                 ],

            },
            // html加载图片
            {
                test:/\.(html)$/i,
                use:'html-withimg-loader', // 解析 html中的图片资源
            },
            //处理其他非js|json|html|css|less|scss|png|gif|jpg|jpeg文件
            {
                exclude: /\.(js|json|html|css|less|scss|png|gif|jpg|jpeg)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'font/',
                    publicPath: './font',
                    name:'[name][hash:8].[ext]'
                }
            },
            //处理sass
            {
                // 正则表达式，表示.css后缀的文件
                test: /\.scss$/,
                // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
                use: [
                    //css打包成独立文件
                    {
                        loader: miniCssExtractPlugin.loader
                    } ,
                    //css处理插件
                    'css-loader',

                    //css兼容性处理
                    'postcss-loader',

                    'sass-loader'
                ]

                // use: ['style-loader','css-loader']    //style-loader类似打包到html中
            },
        ]
    },
    //默认打包方式 开发模式 | production 生产模式
    mode:'development',
    //服务器启动 npx webpack serve
    devServer: {
        port:8080,
        compress:true,
        open:true,
        hot:true
    },
    //生产模式打包时文件过大导致报错
    performance: {
        hints:'warning',
        //入口起点的最大体积
        maxEntrypointSize: 50000000,
        //生成文件的最大体积
        maxAssetSize: 30000000
    },
    //服务器启动后自动刷新
    target: "web",
};

启动 webServe

npx webpack serve