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才能被浏览器自动打开

    })

]

巴特西

12 复习 - webpack基本配置1

最新文章

热门文章