Webpack4
webapck概念
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
一、webapck的安装:
1. npm instasll webapck -g 安装webpack -g为全局
2. npm install webpack-cli -g 安装脚手架工具
3. 在项目下执行npm init初始化项目生成package.json文件手动创建webpack.config.js文件,内容为:
const config = {
entry: './src/js/index.js',
output: {
filename: 'js/index.js',//[hash]生成文件对应的hash值
path: __dirname + '/dist',//生成文件的目录
publicPath: "/dist/" //表示资源的发布地址,当配置过该属性后,打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。
}
};
module.exports = config;
4. 然后可以再package.json文件中配置快捷使用webpack的方式,即在文件的scripts这个key对应的value后面追加一行,追加的key可以自己命名:
"scripts": {
"start": "webpack --mode development",//--mode定义打包方式一般有两种默认为production,development为开发环境的代码,即不压缩的方式
}
第四步操作可以选择,如果不配置此参数即每次启动时使用webpack --mode development或webpack命令也可以进行打包了,配置了之后可以直接使用npm run start运行你配置的命令,此处的start就是你命名的key
webpack-dev-server概念
webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端,客户端根据消息作出响应。简单来说,webpack-dev-server就是一个小型的静态文件服务器。使用它,可以为webpack打包生成的资源文件提供Web服务
二、webpack-dev-server的安装:
1. npm install webpack-dev-server -g //先安装全局的(这里如果不安装全局的下面的webpack-dev-server命令就要在node_modules/.bin/下执行,建议安装全局的)
2. npm install webpack-dev-server --save-dev
3. 然后在webpack.config.js文件中追加:
devServer: {
contentBase: "./dist",//dist为你需要注册静态服务的文件夹
port: "8080",//端口
inline: true, //表示代码修改后页面自动刷新
hot: true//便是模块热替换
}
模块热替换:在热替换(HMR)机制里, HMR程序会只加载被更新的那一部分模块,然后将其注入到运行中的APP中,简单的说你修改了哪里,就会重新更新那一部分的模块
4. 之后就在package中再添加一个scripts的key,和启动webpakc一样这里也是添加 webpack-dev-server的快捷启动方式,即可以使用npm run dev来运行webpack-dev-server
"scripts": {
"start": "webpack --mode development",
"dev": "webpack-dev-server --inline --hot --mode development"
}
5. 这样一个简单的webpack-dev-server环境就配置好了,直接访问http://localhost:8080/就可以访问你注册静态服务的文件夹了这里的端口也可以在devServer这个配置项中进行修改,使用cnpm run dev,这里的dev同样为你命名的key,就可以启动一个静态资源服务
概念
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!
三、loader的安装和使用(这里以css为例)
1. cnpm install css-loader style-loader --save-dev //安装需要的loader模块
(其他一些文件对应的loader可以在这个博客中查找https://blog.csdn.net/keliyxyz/article/details/51649429)
2. 然后在webpack.config.js中添加如下配置
module: {
rules: [
{
test: /\.css$/, //匹配css文件的正则表达式
use: [
{loader: 'style-loader'},//转换css文件需要的loader列表
{loader: 'css-loader'}
]
}
]
}
3. 之后运行webpack就可进行css文件的打包了
四、Webpack中plugin的使用(这里以html-webpack-plugin为例)
1. npm install html-webapck-plugin --save-dev //安装
2. 在webpack.config.js的顶部引入plugin:
const HtmlWebpackPlugin = require('html-webpack-plugin');
3.
4. 在webpack.config.js中添加如下代码:
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',//html源文件所在位置
filename: 'index.html',//输出文件的文件名
minify: {
removeAttributeQuotes: true,//移除属性的引号
removeComments: true,//移除注释
removeEmptyAttributes: true,//移除空属性
collapseWhitespace: true//移除空格
}
})
]
5. 然后就可以进行html文件的打包了
五、HTML中img文件的问题
由于html中没有img文件对应的loader所以如果在html中书写的图片路径打包之后不会被修改为新打包的文件路径,而是之前开发包下的路径,所以我们需要一个新的loader
1. npm install html-withimg-loader --save-dev //安装
2. 在webpack.config.js的rules中添加如下配置:
{
test: /\.html$/,
use: [
{loader: 'html-withimg-loader'}
]
}
3. 这样html中的img文件也会被重新指向打包后的文件路径
六、分离css文件
1. npm install mini-css-extract-plugin --save-dev //安装css分离需要的plugin
(网上有些说使用extract-text-webpack-plugin但是经过楼主实验这个东西在webpack4的版本中已经被遗弃,有的说使用extract-text-webpack-plugin@next就可以但是经过楼主实验 发现依然还是不行, 所以建议大家如果使用webpack4的话还是使用mini-css-extract-plugin)
2. 在webpack.config.js文件的plugins中添加:
new MiniCssExtractPlugin({
filename: "./css/[name].css",//输出文件的目录
}),
3. 将webpack.config.js中的rules中的css的loader改造成:
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
],
}
七、配置babel
1. npm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev//安装
2. 在webpack.config.js的rules中添加:
{
test: /\.(jsx|js)$/,
use: {
loader: 'babel-loader',
options: {
presets: ['env','react']
}
},
exclude: /node_modules/
}
3. 这样babel的环境就配置成功了
当然也可以将options配置在.babelrc文件下:
{
"presets": ['env','react']
}
这样的话webpack.config.js中就不需要options的配置