webpack总结和踩坑实录
Webpack总结
webpack是一个和gulp差不多的自动化的构建工具，功能还是很强大的，能够处理图片压缩，能够处理js，能够处理那些预编译的语言比如sass|scss、css等等，这一切都要归功于有个强大的loader功能。
准备篇
webpack是一个用node的npm包管理工具上的工具，下载和安装：npm install -g --save-dev webpack类似于这样。
它主要包括文件：webpack.config.js、package.json（初始化自动生成，里面有很多版本相关的信息，也包括安装的loaders等等）、入口文件、出口文件。
在webpack.config.js里面，主要代码框架：
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js', //输出的文件名
path: path.resolve(__dirname, 'build') //输出文件所在的目录
},
devServer: { // 检测代码变化并自动重新编译并自动刷新浏览器
contentBase: path.resolve(__dirname, 'build') // 设置静态资源的根目录
},
module: { // 如何处理项目中不同类型的模块
rules: [ // 用于规定在不同模块被创建时如何处理模块的规则数组
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: path.resolve(__dirname, 'node_modules'),
include: path.resolve(__dirname, 'src'),
},
{//css单独打包
test: /\.scss/,
use: ExtractTextPlugin.extract({
use: [{
loader:"css-loader"
},{
loader: 'sass-loader'
}],
fallback: "style-loader"
})
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: ['css-loader'],
}),
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192',
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'main-page.css',
}),
]
}; path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js', //输出的文件名
path: path.resolve(__dirname, 'build') //输出文件所在的目录
},
devServer: { // 检测代码变化并自动重新编译并自动刷新浏览器
contentBase: path.resolve(__dirname, 'build') // 设置静态资源的根目录
},
module: { // 如何处理项目中不同类型的模块
rules: [ // 用于规定在不同模块被创建时如何处理模块的规则数组
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: path.resolve(__dirname, 'node_modules'),
include: path.resolve(__dirname, 'src'),
},
{//css单独打包
test: /\.scss/,
use: ExtractTextPlugin.extract({
use: [{
loader:"css-loader"
},{
loader: 'sass-loader'
}],
fallback: "style-loader"
})
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: ['css-loader'],
}),
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192',
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'main-page.css',
}),
]
};
在package.json中，有一段如下代码，可以在其中做修改以便更方便的执行命令。
bug篇
好吧，我不擅长做笔记。。。。搞得有些bug我暂时想不起来了，有多少总结多少，以后记起来遇到了就补充
-
很多情况下，webpack的版本与extract-text-webpack-plugin的版本不一致，导致执行的时候会报警告：
npm WARN [email protected] requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
updated 1 package in 23.18s
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
updated 1 package in 23.18s
其实是由于本身安装的时候的默认的版本就很尿性的没有一致，所以只需要手动安装一次相同的版本，由于我的webpack是4.0.0的，所以：$ npm install --save-dev [email protected]
-
webpack单独打包scss\css：
{//css单独打包 test: /\.scss/, use: ExtractTextPlugin.extract({ use: [{ loader:"css-loader" },{ loader: 'sass-loader' }], fallback: "style-loader" }) }, { test: /\.css$/, use: ExtractTextPlugin.extract({ use: ['css-loader'], }), },test: /\.scss/, use: ExtractTextPlugin.extract({ use: [{ loader:"css-loader" },{ loader: 'sass-loader' }], fallback: "style-loader" }) }, { test: /\.css$/, use: ExtractTextPlugin.extract({ use: ['css-loader'], }), },plugins: [ new ExtractTextPlugin({ filename: 'main-page.css', }), ]new ExtractTextPlugin({ filename: 'main-page.css', }), ]-
要将css、less、scss等文件打包成一个单asd独的css文件，而不是一起打包到bundle.js里面，则要使用ExtractTextPlugin插件，并且配置好webpack.config.js的几个loader：
npm install --save-dev extract-text-webpack-pluginconst ExtractTextPlugin = require('extract-text-webpack-plugin');ExtractTextPlugin = require('extract-text-webpack-plugin');plugins: [ new ExtractTextPlugin('css/index.css') ]: [ new ExtractTextPlugin('css/index.css') ]{ test: /\.css$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:"css-loader" }) }, { test: /\.scss$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:[{ loader:"css-loader" },{ loader:"sass-loader" }] }) }, { test: /\.less$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:[{ loader:"css-loader" },{ loader:"less-loader" }] }) }test: /\.css$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:"css-loader" }) }, { test: /\.scss$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:[{ loader:"css-loader" },{ loader:"sass-loader" }] }) }, { test: /\.less$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:[{ loader:"css-loader" },{ loader:"less-loader" }] }) }-
在webpack中使用iconfont图标：
在webpack的规则里面：
-
同级目录： ./
-
上一级目录： ../
-
去掉引号
-
-
-