webpack学习笔记

Posted 2020-10-10 原易

1>webpack-初识webpack及环境搭建
npm install -g webpack 全局安装
npm install -g webpack-dev-server 准备一个服务器并监听
webpack <需要打包的文件> bundle.js（输出到哪去） 打包文件
webpack <需要打包的文件> bundle.js（输出到哪去） --watch 持续监听、打包文件
webpack 对应 model.exports 和 require()搭配使用 自定义的文件引入时需要./文件位置
系统自带的不需要./
2>webpack-运用第三方库
使用第三方插件以使用jQuery为例
cnpm install jquery --save ——先下载
let $ =require("jquery") ——再调用

静态文件模块化 以css为例
npm install css-loader style-loader --save-dev
下载后直接引入文件就好
单个文件——require(‘!style-loder!css-loder!./style.css‘)
整体文件——配置webpack入口文件webpack.config.js（必须起这个名字，否则找不到）
内容：
module.exports = {
// 入口文件
entry : ‘./app.js‘,
// 出后文件
output : {
path: __dirname + ‘/dist‘,
filename : "bundle.js"
},
// 需要依赖的插件或者装载器
module :{
loaders : [
{test : /\.css$/,loader : "style-loader!css-loader"}
//正则 所有的css都会通过装载器模块化
]
}
}
之后的打包命令就可以直接使用webpack 会找到入口文件
3>webpack-搭建服务器

使用webpack-dev-server
npm install -g webpack-dev-server
如何使用package.json启动项目
在一个项目中 package.json文件控制了项目的构建方式
我们可以通过修改他来实现自主可控
"scripts": {
"start": "webpack-dev-server --entry ./app.js --output-filename ./bundle.js",//让项目在
服务器端运行 入口文件、出口文件 路径要正确 此后可以通过npm run start命令启动
"build" : "webpack"//构建项目 npm run build
},

项目中的es6语法不是所有浏览器都兼容，所以我们通过babel来将es6转化为es5
安装：
npm install babel-core babel-loader babel-preset-es2015
三个模块分别是 babel核心插件 装载器 需要预编译的语言
之后我们需要在webpack的入口文件webpack.config.js中编辑
module :{
loaders : [
{
test : /\.js$/,//所有的js文件
loader : "babel-loader", //使用装载器编译
exclude : /node_modules/, //排除的文件
query : {
pressets : ["es2015"] //查询预编译的文件
}
},
]
}