基本目录结构如图所示:
介绍:webpack的配置文件都是写在 webpack.config.js 文件下,这个文件位于 项目的跟目录下面,在 终端中运行 "webpack"命令,webpack就会自动执行这个文件中的配置,打包文件,并输出。(他可以打包 css,less,图片等所有静态文件到js中)
前提: 利用 npm 全局安装了 webpack ,并且在项目下面局部安装了 webpack。
如果没有 在项目根目录打开终端,运行命令 :
全局安装: npm i -g webpack
局部安装:npm i --save-dev webpack
一、开始打包最简单的输入输出文件(这是webpack官网的一段代码);
var path = require('path');
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
解析:path 是 node中的一个模块,用来处理文件的路径。
path.resolve(__dirname,'dist')//表示当前目录下的dist文件夹。
module.exports = {},导出的是一个配置对象,这个对象里包含了对于打包代码的各种配置。比如:
entry ,指定了打包的入口文件。
output,指定了打包的出口文件,但是filename是输出的文家名字,path是输出到哪个目录,必须是绝对路径。所以使用 path处理路径 比较方便。
这是一个最简单的例子,从app路径下的index.js开始打包。输出到 指定路径下。
因为默认webpack只能打包处理 js文件,所以:
需要很多loader(处理器),去处理其他的文件,例如: css ,图片文件,less等
二、下面我们开始解析 webpack深层次的东西(以我自己的demo为例)。
(ps:项目结构文章最开始的图片上已经给出,不再赘述)
A:需求:需要将css样式打包进 入口文件中
代码如下:
const path = require('path');
module.exports = { entry: { main: './src/script/main.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name].bundle.js' }, module: { rules: [ { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader",// translates CSS into CommonJS }, { loader: "postcss-loader", } ], } ] } }
解析: 我们要处理css,需要 css-loader 和 style-loader。css-loader是让webpack可以打包 css文件类型,而style-loader是把wenpack解析好的样式以 <style></style>标签的形式插入到页面中。
需求B: 如何让 我们打包的js css等文件自动插入到输出的页面中呢?
(ps:这里我们需要一个插件 : html-webpack-plugin)
通过 npm安装这个插件的命令为:
npm i --save-dev html-webpack-plugin
代码如下所示:
const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { main: './src/script/main.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name].bundle.js' }, module: { rules: [ { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader",// translates CSS into CommonJS } ], } ] }, plugins: [ new htmlWebpackPlugin({ template: 'index.html', filename: 'index.bundle.html' }) ] }
解析:
插件使用:第一步:require(‘。。。’)是把下载好的插件引入到js中。
第二部:在plugins的数组中 new一个新对象,并且传入相关的参数即可。
(ps:template是 以哪个文件为模板插入生成,filename是生成后的文件名字)
需求C : 使用webpack 处理 less文件
代码如下:
const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { main: './src/script/main.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name].bundle.js' }, module: { rules: [ { test: /\.less$/, use: [{ loader: "style-loader" }, { loader: "css-loader", }, { loader: "less-loader" }] } ] }, plugins: [ new htmlWebpackPlugin({ template: 'index.html', filename: 'index.bundle.html' }) ] }
解析: 此时 需要less的环境和less-loader去解析。运行 npm命令安装
安装less和less-loader : npm i --save-dev less less-loader
其中是匹配以 .less 结尾的文件 交给 less-loader处理。
less-loader处理完之后生成的css样式,再交给 css-loader处理,css-loader处理完之后生成style样式,再用
style-loader处理插入到页面中。
需求 D : 打包图片:(这里只给出书写格式,需要 url-loader需要自己下载,若不明确,从开始阅读安装步骤)
代码示例:
module.exports = { /*。省略。。*/ module: { rules: [ { test: /\.(png|jpg|gif|svg)$/, use: [ { loader: 'url-loader', } ] } ] } /*。。省略。*/ }
需求 E: 处理 Vue 单文件 ,以及 VUe项目整体架构的配置文件
示例代码:
const path = require('path'); //将打包好的js自动引入 html中的插件 const htmlWebpackPlugin = require('html-webpack-plugin'); //引入局部webpack const webpack = require('webpack'); //分离css less单独打包 const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: { //打包入口 main: './src/script/main.js' }, output: { // 打包出口 path: path.resolve(__dirname, 'dist'), filename: 'js/[name].bundle.js' }, module: { //打包的规则设置 rules: [ //规则(就是指定不同的文件用哪个处理器处理) { test: /\.vue$/, use: [{ loader: 'vue-loader', options: { extractCSS: true } }], }, { /*注意:当use下面有多个loader时,loader处理文件的顺序自下向上,也就是说, 最开始写的loader最后处理文件*/ test: /\.css$/, /*use: [ { loader: "style-loader" //插入style样式到 页面中 }, { loader: "css-loader",// 打包css文件生成 style样式 }, { loader: "postcss-loader", //给 css样式加上各个浏览器的兼容前缀 } ],*/ //分离css的插件,若不分离 删除这个use的内容使用此注释上边的那个 use即可。 use: ExtractTextPlugin.extract({ use: 'css-loader' }) }, { test: /\.less$/, /*use: [{ loader: "style-loader" }, { loader: "css-loader", }, { loader : "postcss-loader", },{ loader: "less-loader" }],*/ use: ExtractTextPlugin.extract(['css-loader','less-loader']) }, { /*将es6转换成es5的loader*/ test: /\.js$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { presets: ['latest'] //按照最新的ES6语法规则去转换 } } ] }, { /*处理图片的loader*/ test: /\.(png|jpg|gif|svg)$/, use: [ { loader: 'url-loader', } ] } ] }, plugins: [ //插件的使用 /*自动引入js或者css到html的插件*/ new htmlWebpackPlugin({ template: 'index.html', filename: 'index.bundle.html' }), /*分离css的插件*/ new ExtractTextPlugin("style1.css"), ] }
补充:本demo中 main.js的代码如下所示:
'use strict' import '../style/style.less'; import main from '../components/main.vue'; import Vue from 'vue' import '../style/test.css' import '../style/test2.css' var vm = new Vue({ el : '#app', render: h => h(main) });
剩下的就交给你了,技术的路上一路有你们。阿里路亚,感谢神。
耶稣爱你,我也爱你。 good luck!