12 复习 - webpack基本配置1

1.npm包管理工具

npm init -y

如果创建的项目的根目录名称是中文或者包含中文，不能使用-y

npm init

回车时要求你输入包的名称，自己手写项目名称，例test

2.新建src,dist文件夹

src

--index.html 首页

--main.js 项目的JS入口文件

将main.js文件打包引入到index.html，这里的webpack是全局安装的

webpack ./src/main.js --output-filename ./dist/bundle.js --output-path . --mode development

<script src="../dist/bundle.js"></script>

3.自动打包

（1）安装工具webpack-dev-server,实时打包

cnpm i webpack-dev-server -D

提示需要安装webpack依赖

cnpm i webpack -D

（2）项目根目录下新建配置文件

webpack.config.js

//由于webpack是基于Node进行构建的，所以，webpack的配置文件中，任何合法的Node代码都是支持的
var path = require('path')
//向外暴露一个配置对象
//当以命令行形式运行webpack或webpack-dev-server的时候，工具会发现，我们并没有提供要打包的文件的入口和出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个配置对象，然后根据这个对象，进行打包构建
module.exports={
    entry:path.join(__direname,'./src/main.js'),//入口文件
    output:{//指定输出选项
    path:path.join(__direname,'./dist'),//输出路径
    filename:'bundle.js'//指定输出文件的名称
}
}

此时，命令行不需要输入入口文件和出口文件，只需要输入webpack就可打包

（3）实时更新

package.json

"scripts":{
    "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"
}

webpack output is served from / 托管的目录是根路径

(4)安装插件html-webpack-plugin

cnpm i html-webpack-plugin -D

webpack.config.js

//在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
//如果过要配置插件，需要在导出的对象中，挂载一个plugins节点
var htmlWebpackPlugin=require('html-webpack-plugin')

plugins:[//所有webpack 插件的配置节点
    new htmlWebpackPlugin({
        template:path.join(__direname,'./src/index.html'),//指定模板文件路径
        filename:'index.html' //设置生成的内存页面的名称，只有名称为index.html才能被浏览器自动打开
    })
]