一、Install

1.全局安装

bash 复制代码

npm install webpack webpack-cli -g

以项目为单位，一个项目一个webpack版本

如果文件里有中文使用npm init ，如果没有使用npm init -y

进入项目目录

bash 复制代码

//当在开放环境使用这个
npm install webpack webpack-cli -D

//当在生产环境后
npm install webpack webpack-cli

对项目进行打包

bash 复制代码

//可以这样使用，但很奇怪
npx webpack

bash 复制代码

//执行脚本
npm run build

打包会默认的入口文件是src/index.js文件，出口文件是dist。当想要修改名字时可以自行修改

删掉node_module复制一份，然后不需要在安装webpack，因为在package.json里有依赖项

bash 复制代码

//直接使用指令
npm install

webpack本身并不认识css，需要借助loader

安装Css loader

bash 复制代码

npm install css-loader -D

无法直接使用，需要设置关联loader,在webpack.config.js中添加或者修改关联

bash 复制代码

    module:{
        rules:[
            {
                test:/\.css$/,
                loader:"css-loader"
            }
        ]
    }

如果只引入关联css-loader，那么无法生效，因为它只负责解析，并不会将css插入页面

那么就需要来引入style-loader

bash 复制代码

npm install style-loader -D

修改配置文件

bash 复制代码

                use:[
                    "style-loader",
                    "css-loader"
                ]