webpack的基本配置

Webpack安装的两种方式：

1、 全局安装webpack

npm i webpack -g 

2、 在项目根目录运行,安装到项目依赖中

npm i webpack –save-dev

配置过程

一、创建工程

创建文件夹

• src(用来存放源代码)
• dist(项目输出文件夹)

在src文件夹下创建

• index.html
• main.js(项目入口文件)

二、 用npm的包裹管理工具管理起来：
在终端工程目录下输入：
npm init -y
(若项目名称包含中文，则：npm init)
三、 执行：

npm i jquery -S

四、 将所有要引用的包放在main.js里

五、 对mian.js文件进行打包
①、全局打包
把main.js打包引入到index.html中去

webpack .\src\main.js -o .\dist\bundle.js --mode=development

②、自动打包
命令行安装：

cnpm i webpack-dev-server -D 

(实时打包)
缺少文件：

Cnpm i webpack -D

六、在index.html中引用

七、使用webpack打包

在根目录下床创建webpack.config.js
添加

const path = require('path')

module.exports = {
    entry:path.join(__dirname,'/src/main.js'),//入口表示用使用webpack打包哪个文案金
    output:{//输出相关配置
        path:path.join(__dirname,'./dist'), //指定输出的文件的名称
        filename:'bundle.js'
    }
}

八、装webpack-dev-server这个工具，实现自动打包编译功能

npm i webpack-dev-server -D

九、

1、cnpm i
2、npm i webpack -D
3、npm i webpack-cli -D

十、进入其中src

十一、修改index.html中文件目录

十二、编译完成之后自动打开浏览页面
在package.json中设置“dev”：

webpack-dev-server --open --port 3000 --contentBase src 

后追加 –hot实现无刷新热重载
十三、将页面放入内存中去
1、安装Webpack插件用来在内存中生成html：
cnpm i html-webpack-plugin -D
3、 在Webpack.config.js中添加webpack
4、

const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:path.join(__dirname,'/src/main.js'),//入口表示用使用webpack打包哪个文案金
    output:{//输出相关配置
        path:path.join(__dirname,'./dist'), //指定输出的文件的名称
        filename:'bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件，
            template: path.join(__dirname,'./src/index.html'),
            filename: "index123.html"
        })
    ]
}