关于webpack登堂入室的必经之路（1）

基本目录结构如图所示：

介绍：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！

关于webpack登堂入室的必经之路（1）相关推荐

Webpack 常用知识点总结
Webpack 常用知识点总结 webpack 是一个模块打包器.webpack 的主要目标是将 javaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transf ...
webpack打包工具入门 (一)
前言: webpack是前端人员常用到的打包工具,包括vuecli搭建自带webpack.所以面试一家公司,基本都会问到关于webpack的面试题 , 学习webpack是必经之路 . 什么是webp ...
【第二届青训营-寒假前端场】- 「构建Webpack知识体系」笔记
本节课重点内容什么是Webpack Webpack打包核心流程示例步骤关键配置项(如何使用?) 使用Webpack处理CSS/less等思考题使用Webpack接入Babel 思考题使用 ...
第四天：Vue组件的slot以及webpack
插槽认识slot 在生活中,很多地方都有插槽,电脑的USB插槽,插板中的电源插槽等. 插槽的目的是让我们原来的设备具备更多的扩展性.比如电脑的USB我们可以插入U盘.鼠标.键盘.硬盘.手机.音响等等 ...
深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)
阅读目录一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 二:在项目中如何使用 DllPlugin 和 DllReferencePlugin? 三:DllPlug ...
linux怎么卸载webpack,安装webpack后，执行webpack -v命令时报错：SyntaxError: Block-sc
安装webpack后,执行webpack -v命令时报错如下: [root@FreeServer ~]# webpack -v /usr/local/node-v4.4.7-linux-x64/lib ...
express给html设置缓存,webpack + express 实现文件精确缓存
由于最近开发的个人博客(Vue + node)在使用过程中,发现网络加载有点慢,所以打算对它进行一次优化.本次优化的目标如下: index.html 设置成 no-cache,这样每次请求的时候都会比 ...
vue webpack打包入口文件是哪个_Vue项目起步
一,安装nodejs软件(直接商城搜索安装即可). 二,配置npm npm install npm -g 三,配置webpack,在cmd中安装. npm install -g webpack npm ...
webpack打开项目命令_webpack前端模块打包工具基本使用的详细记录（一）
webpack简介我们都知道,Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等 ...
在Vue的webpack中结合runder函数
在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1><div id="app"><login ...

关于webpack登堂入室的必经之路（1）

关于webpack登堂入室的必经之路（1）相关推荐

最新文章

热门文章