webpack的配置与使用

最近几天一直在学习webpack的使用,遇到了很多问题,解决了一些,也有一些未解决,但是通过几天的学习,总算对webpack有了一定的了解.

配置weipack的方法

• 1.安装
  
  • 先新建一个项目,例如test,然后npm init初始化这个项目;然后在控制台输入npm install webpack -g全局安装webpack;但是此时项目中不能直接使用,还要在安装一次,输入npm install webpack --sav-dev;–save-dev指的是开发环境,也就是仅仅是开发时使用webpack,发布后是不用的
• 2.webpack.config.js
  
  • 在根目录新建webpack.config.js文件,对webpack的配置都在这个文件中.
    “`module.exports = {
    entry:{},
    //entry指的是入口文件目录
    output:{},
    //output指的是输出的目录,一般是dist目录
    module:{},
    //module是webpack的依赖,压缩css,图片,字体基本都靠这个
    plugins[],
    //plugins是webpack的插件
    devServer:{}
    //devServer是本地的服务器,代码写好后可以及时浏览

一些注意事项:
 * 1.plugins插件下载后要先定义才能使用,比如html-webpack-plugin,
首先在开头要写
```const htmlWebpackPlugin = require('html-webpack-plugin')```
然后在plugins中
new htmlWebpackPlugin()
 * 2.依赖是不用定义的,直接在module中配置即可,有3种方式配置,例如use:
module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }, 
或者不用user
 module:{
        rules:[
            {
                test:/\.css$/,
                loader:['style-loader','css-loader']
            }
        ]
    },  
 又或者用use+loader的写法
module:{
        rules:[
            {
                test:/\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    },      

常用的module有css-loader,处理css文件,file-load,url-loader处理图片,字体等文件,
如果是直接在img标签引用图片,使用copy-webpack-plugin这个插件单独给这种资源设置一个文件夹