webpack的使用

网址：https://www.webpackjs.com/guides/getting-started/

参考网址：https://www.jianshu.com/p/6712e4e4b8fe

 npm cache clean --force'清缓存再安装

1、首先下载node.js安装node.js；

尽量使用淘宝镜像进行安装，防止出现安装失败

2、使用npm install -g webpack；对webpack进行全局安装；

3、新建项目目录；

4、使用npm init -y生成package.json配置文件；

5、生成项目目录下的webpack：npm install --save-dev webpack 和安装 webpack-cli: npm install --save-dev webpack-cli 和 npm install webpack-dev-server --save-dev

webpack4打包使用时：webpack  默认打包src--->index.js生成后再dist----->main.js

打包是会有这种警告提示：

这是因为mode有两种打包环境：1、development开发环境;2、production生产环境；

打包是输入：webpack --mode=development或者webpack --mode=production就不会有警告了

创建webpack.config.js文件

const path= require('path')
module.exports = {
    mode:'development',
    //入口
    entry:{
      main:'./src/index.js'  
    } ,
    //出口
    output:{
      path:path.resolve(__dirname,'../dist'),
      filename: 'bundle.js'
    },
    //模块:css图片
    module:{},
    // 插件
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

package.json中

“scripts”:{

　　"build":"webpack --config webpack.config.js"

}

使用配置进行打包：npm run build

安装css： 

新建一个src/css/index.css

index.js中把css引入

import css from './css/index.css'

打包css需要下载配置css的loader: npm install style-loader css-loader --save-dev

在webpack.config.js中配置

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

如果不使用默认的，使用webpack.config

##安装(推荐局部安装)
npm install webpack -g      //-g 代表全局安装
npm install webpack -s      //-s 代表局部安装

#安装 
npm install --save-dev webpack  -s

#安装 webpack-cli
npm install --save-dev webpack-cli -s //局部安装 （webpack 4.0必须安装）

#创建backage.json文件
npm init -y

#安装 style-loader css-loader
npm i style-loader css-loader -s

#安装less的loader
npm install --save-dev less less-loader -s

#安装file-loader加载图片
npm install --save-dev file-loader -s

#安装url-laoder 加载字体
npm install --save-dev url-loader -s

#安装csv-loader xml-loader 加载数据（CSV、TSV 和 XML）
npm install --save-dev csv-loader xml-loader -s

#检查版本是否安装成功
webpack -v

##删除
#全局卸载
npm uninstall webpack -g

#局部卸载
npm uninstall webpack -s