webpack核心提炼

基本是学习的时候在网上整理的资料,并非自己原创,这篇文章的的主要目的是记录webpack.config.js的配置方式.可能也有不少错误,欢迎指正!!

一、应用场景

前端模块化开发、功能拓展、css预处理等需求导致项目中的文件数目变得更多,层级也更复杂.

二、主要职能

webpack的工作主要是打包,分为三个环节:匹配、处理、打包.

三、配置文件-webpack.config.js

在项目的根目录新建一个webpack.config.js文件告诉webpack该做的事.

module.exports={
    //入口文件的配置项
    entry:{},
    //出口文件的配置项
    output:{},
    //解读CSS,图片如何转换，压缩等配置
    module:{},
    //项目依赖
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

四、配置项分析

1.entry-入口项配置.

我们需要压缩的文件,比如js、css、less文件等

entry:{
    //里面的entery是可以随便写的
    entry:'./src/entry.js'
},

2.output-出口项配置

压缩完成后文件名和地址

(1)._dirname:node中path对象的一个属性,获取当前文件的绝对路径.打包路径表示需要最终把打包好的文件生成在哪里,所以需要根据webpack.config.js的绝对位置来判断.为了不写死,我们需要动态获取绝对位置,就有用到这一属性
(2)path.resolve('a','b'):path对象的一个方法,将两个字符串拼接成一个新路径(自带一些优化功能,不仅仅是字符串拼接).
(3)path:以上两个都要依赖于path模块,所以要先通过require('path')导入path模块.

const path = require('path');
 
output:{
    //打包的路径
    path:path.resolve(__dirname,'dist'),
    //打包的文件名称
    filename:'bundle.js'
 
}

整个过程的意义就是,告诉webpack,我要你把入口配置好的所以文件给我压缩成名叫"bundle.js"的文件,放在路径"path"处

3.多入口、多出口文件打包

const path = require('path');
module.exports={
    entry:{
         //为了区别不同的入口,需要不同的属性名
        entry:'./src/entry.js',
        //这里我们又引入了一个入口文件
        entry2:'./src/entry2.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称,[name]会自动获取入口文件中的文件名,不同的文件就能拿到不同的文件名
        filename:`[name].js`
    },
    module:{},
    plugins:[],
    devServer:{}
}

4.同时压缩js文件和css文件

先下载处理器
npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader

const path = require('path');
module.exports={
    entry:{
//入口文件并没有css文件?可以在entry.js中引入css文件,方便webpack进行同步压缩
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:`[name].js`
    },
    //webpack能识别css文件,但是你必须得告诉它我这里有css文件,所以在这里你要告诉它哪些文件是css文件
    module:{
    //它表示哪种类型的文件用哪种处理器(处理器?原来有吗?没有!所以需要下载,需要执行下载的语法)
    rules:[
   //匹配到.css结尾的文件,就先调用对应的处理器
    {test: /\.css$/, loader: "style!css?sourceMap!postcss"},
    {test: /\.less$/, loader: "style!css!less|postcss"},
    {test: /\.scss$/, loader: "style!css!sass|postcss"}
 ]
]
},
    plugins:[],
    devServer:{}
}

还有其他的处理器,根据需求下载和匹配

• css-loader 处理css中路径引用等问题
• style-loader 动态把样式写入css
• sass-loader scss编译器
• less-loader less编译器
• postcss-loader scss再处理
• babel-loader js处理器这里需要配置(exclude)
• jsx-loader
• url-loader
• file-loader
• json-loader
• raw-loader

4.plugins-插件依赖

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。
多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 来创建它的一个实例。

先下载处理器
npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader

const path = require('path');
//导入需要的插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const webpack = require('webpack'); 
module.exports={ 
entry:{
 entry:'./src/entry.js', 
entry2:'./src/entry2.js'
 }, 
output:{ 
path:path.resolve(__dirname,'dist'), filename:`[name].js`
 },
 module:{ 
rules:[ 
{test: /\.css$/, loader: "style!css?sourceMap!postcss"}, 
{test: /\.less$/, loader: "style!css!less|postcss"}, 
{test: /\.scss$/, loader: "style!css!sass|postcss"} 
 ] 
},
 plugins:[
//打包js文件
  new webpack.optimize.UglifyJsPlugin(),
//entry.html未模板生成一个html5文件
  new HtmlWebpackPlugin({template:'./src/entry.html'})
 
],
    devServer:{}
}

5.devServer-虚拟服务器

• 在开发模式下，DevServer 提供虚拟服务器，让我们进行开发和调试。
• 而且提供实时重新加载。简直美滋滋。大大减少开发时间。
• 它不是 webpack 内置插件哦，要安装！！！

先下载处理器
npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader
 
安装server插件
npm install webpack-dev-server --save-dev

const path = require('path');
//导入需要的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports={
entry:{
 entry:'./src/entry.js',
entry2:'./src/entry2.js'
 },
output:{
path:path.resolve(__dirname,'dist'), filename:`[name].js`
 },
 module:{
rules:[
{test: /\.css$/, loader: "style!css?sourceMap!postcss"},
{test: /\.less$/, loader: "style!css!less|postcss"},
{test: /\.scss$/, loader: "style!css!sass|postcss"}
 ]
},
 plugins:[
//打包js文件
  new webpack.optimize.UglifyJsPlugin(),
//entry.html未模板生成一个html5文件
  new HtmlWebpackPlugin({template:'./src/entry.html'})
 
],
//这里只列出部分参数,还有许多参数
    devServer: {
    //如果为 true ，页面出错不会弹出 404 页面。如果为 {...} , 看看一般里面有什么。
     historyApiFallback: true,
    //热模块更新作用。即修改或模块后，保存会自动更新，页面不用刷新呈现最新的效果(实际功能是自动添加HMR这个插件)
     hot: true,
    //如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用。
     compress: true,
    //写主机名的。默认 localhost
     host: 'localhost',
    //端口号。默认 8080
     port: 8080
}

五.本地服务器

在 package.json 配置下，方便使用

"scripts": {
    "dev": "webpack-dev-server" // 运行命令会自动在node_modules文件夹找 webapck-dev-server模块。"dev"就是你命令中run后面的词,你也可以换成"server"等词,不过对应的命令就得换成"npm run server"等
 }

如果没在 package.json 配置且还是局部安装，你就要在命令行输入 node_modules/.bin/webpack-dev-server。若你 package.json 配置好了，在命令行输入npm run dev