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

NPM 的基本使用

WebPack 的使用

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

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

启动 webServe

更多相关文章

随机推荐

NPM 和webpack 的基础使用

NPM 的基本使用

WebPack 的使用

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

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

启动 webServe

更多相关文章

随机推荐

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

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