12 复习 - webpack基本配置1

非 Y 不嫁゛ 提交于 2019-12-04 18:11:05

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才能被浏览器自动打开
    })
]
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!