简单使用webpack

全局简单使用webpack

配置webpack.config.js
关于webpack-dev-server的使用
使用cnpm i html-webpack-plugin -D
webpack-dev-server指令

全局简单使用webpack

1.cmd中下载webpack 使用cnpm i webpack@ -g 全局布置
2.创建项目
3.使用npm init 初始化项目，生成package.json项目文件
4.创建项目基本结构 src源码文件夹，dist发布文件夹
5.在src下创建index.html主文件，main.js项目js入口文件
6.使用webpack .\src\main.js .\dist\bundle.js 将文件打包

配置webpack.config.js

1.在根目录创建一个文件webpack.config.js文件
2.

 const path =require('path')

module.exports={
//指定处理文件名字及路径
    entry:path.join(__dirname,'./src/main.js'),
output:{
//指定输出路径
        path:path.join(__dirname,'./dist'),   	//指定输出文件
        filename:'bundle.js'
    }
}

3.这里就可以直接使用webpack直接打包了

关于webpack-dev-server的使用,实现实时自动监听，热加载

1.使用cnpm i webpack-dev-server -D下载
2.这个webpack-dev-server依赖与项目本地中的webpack
3.使用cnpm i webpack -D 项目本地下载webpack
4.packge.json配置文件中scripts添加 “dev”:”webpack-dev-server”
5.使用npm run dev 实现打包

使用cnpm i html-webpack-plugin -D

1.cnpm i html-webpack-plugin下载
+能够在内存找那个生成一个一样的index.html
+能都自动注入bundle.js
2.在webpack.config.js里面配置

const path =require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
//指定处理文件名字及路径
entry:path.join(__dirname,'./src/main.js'),
output:{
//指定输出路径
        path:path.join(__dirname,'./dist'),     //指定输出文件
        filename:'bundle.js'
    },
plugins:[
    new htmlWebpackPlugin({
        template:path.join(__dirname,'./src/index.html'),
        filename:'index.html'
    })
]
}

3.使用npm run dev指令打包
注：这个时候html.index主页面里引用的
script src="…/dist/bundle.js"></script
可以删除了，因为此时打包的bundle.js并没有在这里了，而是可以看作在与src，dist在一层，实际在内存中，不信你也可以试试喔

以上便完成了简单使用webpack指令，自动化打包加载的功能

webpack-dev-server的基本指令

1.opne编译打包后自动打开浏览器
只需要在packge.json配置的scripts中的dev加上open
"dev": "webpack-dev-server --open"
2.如想指定端口，在open后加port端口号
"dev": "webpack-dev-server --open --port 8800"
3.指定ip地址，同理，加上host ip地址
"dev": "webpack-dev-server --open --port 8800 --host 127.1.1.0"
4.只编译更改的代码 --hot
"dev": "webpack-dev-server --open --port 8800 --host 127.1.1.0 --hot"

5.也可以直接在webpack.Config.js的配置包直接加上
devServer:{
open :true,
port:8800,
host:“127.1.1.0”,
hot:true/启用热更新需要插件，过程较为繁琐
}

处理css文件

1.创建css文件，在main.js中引用
import css from './main.css'
2.下载style-loader 和 css-loader
cnpm i style-loader css-loader -D
3.webpack.config.js中配置
module:{
rules:[
{test:/.css$/,use:[‘style-loader’,‘css-loader’]}
]
}

处理样式表中的图片

1.下载url-loader和file-loader（file-loader是url-loader的前置依赖项）
cnpm i url-loader file-loader -D
3.配置webpack.config.js
{test:/\.jpg$/,use:['url-loader']}
注意第一次写博客 不喜勿喷，每一步都是亲手实验得来，如有错误请多指教