Webpack初步使用

前端使用vue时使用webpack打包工具：注意使用webpack打包工具时，不建议在html文件中引入任何其他文件
1.新建文件夹，在文件夹下创建目录
|--dist
|--src
    |--css
    |--js
    |--img
    |--index.html
    |--main.js    //这个是所有的Js文件的入口
|--webpack.config.js    //这个是配置文件    

//以上文件创建完成之后
在webpack.config.js配置信息：
const path = require('path')
module.exports = {
    entry: path.join(__dirname,'./src/main.js'),//入口，这里表示webpack要打包哪个文件
    output:{
        path:path.join(__dirname,'./dist'),//出口，表示webpack打包完后将文件输出到哪个目录
        filename:'bundle.js'//这是指定输出的文件的名称
    }
}

//若需要用到jquery，则在main.js文件中使用import方式导入
在main.js中配置
*import $ from 'jquery'
完成之后需要在npm中下载此依赖,下载方式：npm i jquery -s 
下载完成之后，项目中会多出node_modules目录

//接着需要安装webpack打包工具，4.0以上版本还需要安装webpack-cli工具
*安装方式：cnpm i webpack -D  以及  cnpm i webpack-cli -D (虽然全局已经安装过webpack,但是在项目中还是需要安装此工具)
此时项目中会多出:package.json文件

//以上方式若我们有修改文件，我们每次更新都需要重新打包，所以为了减少不必要的打包操作，则引入自动打包工具webpack-dev-server
*安装方式：cnpm i webpack-dev-server -D
安装完成之后需要配置一些信息使其可以自动打包编译
在package.json文件中配置：--open：项目启动后自动打开浏览器   --port 3000：设置项目端口  --contentBase src：项目在浏览器中默认打开的文件文字  --hot：热更新
{
  "scripts": {
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  }
}
配置完后则可以通过命令：npm run dev 启动项目

//接着我们还可以把html文件放入内存中，首先需要安装html-webpack-plugin工具
*安装方式：cnpm i html-webpack-plugin -D
安装完成之后需要在webpack.config.js中导入此工具
const htmlWebpackPlugin = require('html-webpack-plugin')
然后再配置其相关信息
//配置
module.exports = {
    plugins:[//配置插件的节点
        new htmlWebpackPlugin({    //创建一个在内存中生成html页面的插件
            template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来会将此路径的页面在内存中去生成
            filename:'index.html'//指定生成页面的名称
        })
    ]
}

//样式文件的引入，由于webpack默认只能打包处理Js类型的文件，无法处理其他非Js类型的文件，所以需要我们手动的去设置匹配规则
*安装第三方加载器：cnpm i style-loader css-loader -D
安装完成之后在main.js中用import方式引入css文件
import './css/index.css'
然后在webpack.config.js配置文件中进行配置：
//配置
module.exports = {    
    module:{//所有第三方模块加载器
        rules:[//所有第三方模块的匹配规则，test表示正则的test()方法
            {test:/\.css$/,use:['style-loader','css-loader']}//css文件的第三方loader规则
        ]
    }
}