webpack笔记1-CSDN博客

webpack是一种打包工具，将所有的文件打包成一个js文件，减少浏览器的压力。 wepack的打包指令 webpack app/main.js public/index.js//将main.js里面的js文件打包到 index.js，这种方式文件路径比较繁琐因此出现webpack.config.js 文件中是webpack的配置项

module.export={
entry:__dIrname+xxx
output:{
path:__dirname+xxx，//打包后文件路径
filename:index.js//打包后的文件名字
}，
module：{
loaders:[
{
test:/\.json$/ ，
loader：‘json’
}
]
}
}
复制代码

webpack的 pakage.json中主要记录

scripts{
//执行node的命令的地方
dev:"webpack"//执行webpack压缩的指令，使用方式（npm run dev）
start:"webpack"///执行webpack压缩的指令，使用方式（npm start）
}
复制代码

同样是执行压缩命令为啥一个npm run dev一个npm start start是node里面的变量类似js里面的var，因此node认识。

loaders：
loaders需要单独安装并且需要在webpack.config.js下的module关键字下进行配置。loadders配置项包括以下几个方面
test 一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
loader loader名称（必须）
include/exclude 手动天剑必须要处理的文件（文件夹）或者屏蔽不需要处理的文件（文件夹）（可选）
query 为loaders提供其他的额外设置选项（可选）
一、简单的json文件使用方法：
1、下载json loader cnpm install --save-dev json-loader
2、在webpack.config.js中配置相中加入module模块
二、样式表工具的应用
使用方法一：
webpack提供两个工具处理样式表css-loader 和style-loader css-loader 使你能够用类似@import和url（...）的方式实现require的功能 style-loader将所以计算好的样式加入到页面中，二者结合在一起使你吧样式嵌入到webpack打包后的js文件中。
安装命令 npm install --save-dev style-loader css-loader
配制写法 module:{

loaders:[
{
test:/\.css$/,
loader:'style!css'//感叹号的使用在于可以在同一个文件中可以用不同的loader,加载方式是从右到左， 先执行css-loader后执行style-loader压到js文件中去。
}
]
}
复制代码

使用方法二：
css3的语法需要添加前缀，这个工作就交给了webpack，方便兼容性问题。
安装插件 npm install --save-dev postcss-loader autoprefixer

配制写法 module:{
loaders:[
{
test:/\.css$/,
loader:'style!css!postcss'
}
],
postcss:[require('autoprefixer')]//调用autoprefixer插件

}
复制代码

三、babel的使用
babel其实是几个模块化的包其核心功能位于babel-core 的npm 包中，不过webpack把他们整合在一起使用，但是对于每一个你需要的功能或扩展，你需要安装单独的包（用的最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）
安装React npm intall --save-dev react react-fom

配制写法

{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel',//在webpack的module部分的loaders里进行配置即可
query：{
preset:['es2015','react']
}
}
复制代码

四、插件的使用
插件（plugins）是用来拓展webpack功能的，他们会在整个构建过程中生效，执行相关的任务
loaders和plugins 他们是完全不同的，loaders 是在打包构建过程中用来处理源文件的（jsx，scss，less），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程起作用使用方式;
1、npm 安装
2、webpack的配制文件中的plugins关键字部分添加该插件的实例
例子：添加版权声明的插件(版权声明插件是webpack自带的并不需要安装插件) 在配制文件webpack.congfig.js文件中

var webpaclk=require('webpack')
module.exports={
plugins:[
new webpack.BannerPlogin('xxxxxxxxxxxxxxxx')
]
}
复制代码

例子使用htmlWebpackPlogin
这个插件的作用是依据一个简单的模板帮你生成最终的h5文件，这个文件自动引用你打包后的js文件，每次编译都在文件名中插入不同的哈希值。
安装 npm install --save-dev html-webpack-plugin
配制:

module.exports={
var html=require(''html-webpack-plugin),
loaders:{
},
plogins:[
new html({
template:__driname+'/app/index.html'//此处是工程的模板文件地址
})

]
}
复制代码

打包后自动生成public文件

五、自动打包代码
webpack开发服务器，webpack官方提供一个辅助开发工具，他可以自动监控项目下的文件，一旦有修改保存操作，他就会自动执行打包命令，将代码重新打包，如果需要的话可以刷新浏览器。
1、下载webpack-dev-server npm install --save-dev webpack-dev-server
2、参数
contentBase 默认webpack-dev-server
会为根文件夹提供本地服务器，如果想要为另一个目录下的文件提供本地服务，应该在其所在目录
port 设置默认监听端口默认8080
inline 设置为true 当源文件改变是会自动刷新页面
colors 设置为true ，使终端输出的文件为彩色的
historyApiFallback 在开发单页面应用时非常有用，它依赖HTML5 historyAPI 如果设置为true 所有的跳转指向index.html
在webpack.config.js中添加配置

devServer{
contentBase:"/public",
color:true,
inline:true
}
复制代码

配制好了如何运行？？？
webpack-dev-server有两种启动方式 iframe 该模式下修改代码自动打包，不刷新浏览器。 inline 该模式下修改代码自动打包，刷新浏览器。运行方式在命令行输入 webpack-dev-server --inline