webpack学习笔记

223 阅读2分钟

--------------------------------------------安装环境--------------------------------------------------------------- npm install -g webpack //全局安装webpack

npm init //初始化package.json ,如果不是在npm中发布模块,可以still enter

npm install --save-dev webpack //在当前项目目录中安装webpack作为依赖包

---------------------------------------------webpack打包-----------------------------------------------------------

webpack {入口js文件的路径} {打包后的文件路径} //填写路径的时候不用添加{}

node_modules/.bin/webpack {入口js文件的路径} {打包后的文件路径} //webpack没有全局安装的情况下

		----------------------使用配置文件代替路径----------------------

1.直接输入webpack 命令即可 在根目录下创建webpack.config.js文件

注:“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。
module.exports = {

entry:  __dirname + "/app/main.js",//唯一入口文件

output: {
path: __dirname + "/public",//打包后的文件存放的地方

filename: "bundle.js"//打包后输出文件的文件名

}

}	     

2.使用npm start命令 在根目录的package.json中添加以下节点 "scripts": { "start": "webpack" // 修改的是这里,JSON文件不支持注释,引用时请清除 },

---------------------------------------------调试-------------------------------

devtool: 'eval-source-map' //可选项有source-map,cheap-module-source-map,eval-source-map, cheap-module-eval-source-map,依次打包速度越来越快,带上会带来负面的安全影响等,所有建议开发过程中使用,发布的时候去掉该配置

    ----------------------------------热更改-------------------------------

webpack可以提供一个可选的本地开发服务器,是用node.js构建的,可以实时监听目录的代码更改,但是这是一个单独的组件,需要单独安装

npm install --save-dev webpack-dev-serve

devServer: { contentBase: "./public",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 port:8080,//端口,可省略,默认8080 inline: true//实时刷新 }

在npm的配置文件中的scripts中配置也可快速启动该服务器 "scripts": { "serve": "webpack-dev-server --open" // 修改的是这里,JSON文件不支持注释,引用时请清除 },