[webpack]-webpack超级详细搭建实用前端环境
前言：
webpack 超级实用前端环境搭建
一、我们日常使用的前端开发环境应该是怎样的？
- 构建我们需要发布的html，css ,js 文件
- 使用css 预处理器来编写样式
- 处理压缩图片
- 使用Bable支持ES新特性
- 本地提供静态环境开发调试
二、关联HTML
webpack 默认从作为入口的 .js 文件进行构建（更多是基于 SPA 去考虑），但通常一个前端项目都是从一个页面（即 HTML）出发的，最简单的方法是，创建一个 HTML 文件，使用 script 标签直接引用构建好的 JS 文件
<script src="./dist/bundle.js"></script>
但是，如果我们的文件名或者路径会变化,so 我们使用 html-webpack-plugin 插件
html-webpack-plugin 是一个独立的 node package，所以在使用之前我们需要先安装它，把它安装到项目的开发依赖中：
npm install html-webpack-plugin -D
然后在 webpack 配置中，将 html-webpack-plugin 添加到 plugins 列表中：（默认版配置）
cosnt HtmlWebpackPlugin = require(\'html-webpack-plugin\')
module.exports = {
//...
Plugins:[
new HtmlWebpackPlugin (),
]
}
然而默认配置，并没有什么用哦。这时候我们需要一个实践项目版
const HtmlWebpackPlugin = require(\'html=webpack-plugin\')
module.exports = {
//...
Plugins:[
new HtmlWebpackPlugin ({
filename:\'index.html\' //配置输出文件名和路径
template：\'assets/index.html\' ,//配置文件模板
}),
],
}
嘿，我们实际项目怎么可能只有一个HTML文件了。这时候我们再来一个 多个页面版
官方提供的例子是这样的
const HtmlWebpackPlugin = require(\'html=webpack-plugin\')
module.exports = {
//...
Plugins:[
new HtmlWebpackPlugin ({
filename:\'index.html\' //配置输出文件名和路径
template：\'assets/index.html\' ,//配置文件模板
}),
new HtmlWebpackPlugin ({
filename:\'address.html\' //配置输出文件名和路径
template：\'assets/index.html\' ,//配置文件模板
}),
],
}
到这里，应该满足大部分需求了，但但但是，，，，，， 我还想提供另外一种。
webpack的入口文件是多个的，生成多个HTML文件。不废话 上代码
const HtmlWebpackPlugin = require(\'html-webpack-plugin)
var entries = \'./src/entry/**/**/*.js\' //多入口文件
//敲黑板
for(var pathname in entries){
var conf ={
filename:"dist/pages/"+ pathname + ".html",
template:\'index.html\' ,
hash:false
}
webpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}
三、构建css
嘻嘻，我们在编写css，并且希望使用webpack来进行构建，为此我们需要配置中引入loader来解析和处理css 文件,嘿朋友要记得安装 style-loader和css-loader 哦
module.exports = {
module: {
rules: [
// ...
{
test: /\.css/,
include: [
path.resolve(__dirname, \'src\'),
],
use: [
\'style-loader\',
\'css-loader\',
],
},
],
}
}
那就创建一个index.css 文件，并在index.js 中引用它，然后进行构建呀
//在index.js 中哦
import \'./index.css\'
发现运行和没有瞧见index.css 啊（有点急人啊）
- css-loader 负责解析 CSS 代码，主要是为了处理 CSS 中的依赖，例如 @import 和 url() 等引用外部文件的声明；
- style-loader 会将 css-loader 解析的结果转变成 JS 代码，运行时动态插入 style 标签来让 CSS 代码生效。
经由上述两个 loader 的处理后，CSS 代码会转变为 JS，和 index.js 一起打包了。如果需要单独把 CSS 文件分离出来，我们需要使用 extract-text-webpack-plugin 插件。
const ExtactTextPlugin = reuire(\'extact-text-plugin\')
module.exports = {
//...
module:{
rules:[
{
test:/\.css$/,
// 因为这个插件需要干涉模块转换的内容，所以需要要使用它对应的loader
use:ExtractTextPlugin.extrract({
fallbac:\'style-laoder\',
use:\'css-loader\',
})
}
]
},
plugins:[
// 引入插件，配置文件名，可以使用hash
new ExtracttextPlugin（\'index.css\'）,
],
}
可要注意了，实际项目不会只有一个css文件呀。
ExtractTextPlugin 对 每个入口 chunk 都生成一个对应的文件，所以当你配置多个入口 chunk 的时候，你必须使用 [name], [id] 或 [contenthash]
//贴出官方给的多个实例的代码
const ExtractTextPlugin = require(\'extract-text-webpack-plugin\');
// 创建多个实例
const extractCSS = new ExtractTextPlugin(\'stylesheets/[name]-one.css\');
const extractLESS = new ExtractTextPlugin(\'stylesheets/[name]-two.css\');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: extractCSS.extract([ \'css-loader\', \'postcss-loader\' ])
},
{
test: /\.less$/i,
use: extractLESS.extract([ \'css-loader\', \'less-loader\' ])
},
]
},
plugins: [
extractCSS,
extractLESS
]
};
四、css 预处理器
在上述使用 CSS 的基础上，通常我们会使用 Less/Sass 等 CSS 预处理器，webpack 可以通过添加对应的 loader 来支持，以使用 Less 为例，我们可以在官方文档中找到对应的 loader。
嘿，我是用less.
那我们在webpack配置中，添加一个支持解析后缀为.less的文件
module.exports = {
// ...
module: {
rules: [
{
test: /\.less$/,
// 因为这个插件需要干涉模块转换的内容，所以需要使用它对应的 loader
use: ExtractTextPlugin.extract({
fallback: \'style-loader\',
use: [
\'css-loader\',
\'less-loader\',
],
}),
},
],
},
// ...
}
五、处理图片文件
在前端项目的样式中总会使用到图片，虽然我们已经提到 css-loader 会解析样式中用 url() 引用的文件路径，但是图片对应的 jpg/png/gif 等文件格式，webpack 处理不了。是的，我们只要添加一个处理图片的 loader 配置就可以了，现有的 file-loader 就是个不错的选择。
module.exports = {
// ...
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: \'file-loader\',
options: {},
},
],
},
],
},
}
六、font 类型处理
来来来 说到这里 我说一个坑：升级了element UI 框架 总是报错，我去font 没有处理
module.exports = {
// ...
module: {
rules: [
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: \'url-loader\',
options: {
limit: 10000,
name: utils.assetsPath(\'fonts/[name].[hash:7].[ext]\')
},
],
},
],
},
}
七、使用Babel
Babel 是一个让我们能够使用 ES 新特性的 JS 编译工具，我们可以在 webpack 中配置 Babel，以便使用 ES6、ES7 标准来编写 JS 代码。
module.exports = {
// ...
module: {
rules: [
{
test: /\.jsx?/, // 支持 js 和 jsx
include: [
path.resolve(__dirname, \'src\'), // src 目录下的才需要经过 babel-loader 处理
],
loader: \'babel-loader\',
},
],
},
}
八、启动静态服务
我们完成了处理多种文件类型的 webpack 配置。我们可以使用 webpack-dev-server 在本地开启一个简单的静态服务来进行开发
在项目下安装 webpack-dev-server，然后添加启动命令到 package.json 中：
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development"
}
哇，到最后啦
运行 npm run start
http://localhost:8080/
后言：
在多页面项目下使用Webpack+Vue 了解一下，很详细的介绍了每一个配置，我们项目实际开发用到的（剥离，剥离出来）
https://github.com/FannieGirl/Build-a-development-environment