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规则
        ]
    }
}