前言：css

　　webpack 超级实用前端环境搭建html

1、咱们平常使用的前端开发环境应该是怎样的？前端

构建咱们须要发布的html，css ,js 文件
使用css 预处理器来编写样式
处理压缩图片
使用Bable支持ES新特性
本地提供静态环境开发调试

2、关联HTMLnode

webpack 默认从做为入口的 .js 文件进行构建（更可能是基于 SPA 去考虑），但一般一个前端项目都是从一个页面（即 HTML）出发的，最简单的方法是，建立一个 HTML 文件，使用 script 标签直接引用构建好的 JS 文件webpack

<script src="./dist/bundle.js"></script>

可是，若是咱们的文件名或者路径会变化,so 咱们使用 html-webpack-plugin 插件git

html-webpack-plugin 是一个独立的 node package，因此在使用以前咱们须要先安装它，把它安装到项目的开发依赖中：github

npm install html-webpack-plugin -D

而后在 webpack 配置中，将 html-webpack-plugin 添加到 plugins 列表中：（默认版配置）web

cosnt HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { //... Plugins:[ new HtmlWebpackPlugin (), ] }

然而默认配置，并无什么用哦。这时候咱们须要一个实践项目版npm

const HtmlWebpackPlugin = require('html=webpack-plugin') module.exports = { //... Plugins:[ new HtmlWebpackPlugin ({ filename:'index.html' //配置输出文件名和路径 template：'assets/index.html' ,//配置文件模板 }), ], }

嘿，咱们实际项目怎么可能只有一个HTML文件了。这时候咱们再来一个 多个页面版json

官方提供的例子是这样的

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)) }

3、构建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 ] };

4、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', ], }), }, ], }, // ... }

5、处理图片文件

在前端项目的样式中总会使用到图片，虽然咱们已经提到 css-loader 会解析样式中用 url() 引用的文件路径，可是图片对应的 jpg/png/gif 等文件格式，webpack 处理不了。是的，咱们只要添加一个处理图片的 loader 配置就能够了，现有的 file-loader 就是个不错的选择。

module.exports = { // ... module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: {}, }, ], }, ], }, }

6、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]') }, ], }, ], }, }

7、使用Babel

Babel 是一个让咱们可以使用 ES 新特性的 JS 编译工具，咱们能够在 webpack 中配置 Babel，以便使用 ES六、ES7 标准来编写 JS 代码。

module.exports = { // ... module: { rules: [ { test: /\.jsx?/, // 支持 js 和 jsx include: [ path.resolve(__dirname, 'src'), // src 目录下的才须要通过 babel-loader 处理 ], loader: 'babel-loader', }, ], }, }

8、启动静态服务

咱们完成了处理多种文件类型的 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

[webpack]-webpack超级详细搭建实用前端环境

在多页面项目下使用Webpack+Vue 了解一下，很详细的介绍了每个配置，咱们项目实际开发用到的（剥离，剥离出来）