webpack 入门基础配置

Posted 2021-03-06 九九柒

webpack

• 基于node.js的一个打包工具

作用

1. 优化
2. 打包：将多个文件打包成一个文件
3. 转换：es6，ts，jsx，less，sass

目标

1. 可以通过webpack对公司现有的项目进行从0开始的搭建
2. 可能对vue，react脚手架进行天剑与修改的操作

结构

1. 入口：entry
2. 出口：output
3. 插件：plugins

所需依赖

1.初始化

cnpm init 

2.webpack的核心模块

cnpm install webpack webpack-cli -g
//webpack-cli :来执行webpack相关的命令行

//配置项
"scripts": {
   "dev":"webpack --mode development --watch", //开发环境 npm run dev    --watch 实时监听
   "build":"webpack --mode production",  //生产环境  npm run build
   "test": "echo "Error: no test specified" && exit 1"
  },

3.入口和出口

//默认情况入口是 index.js 出口是dist/main.js
//根目录下创建 webpack.config.js

//webpack配置文件
module.export={
    //入口
    entry:{
        "名字": __dirname + "/src/main.js"
    },
    //出口
    output:{
        //打包后文件存储的目录
        path: __dirname +"/dist" ,
        //打包后的文件名
        filename:"aaa.js"
        //多个入口时
        filename:"[name].js"
    }
}

//配置文件修改完要重启服务

4.webpack-dev-server 浏览器自动重载

1. 安装
cnpm i --save webpack-dev-server
2. 配置
    devServer:{
        contentBase:'./'   //根目录地址
        //端口号
        port:8080,
         proxy:{

         }
         inline:true  //实时刷新开启 
    }

//package.json
"start" : "webpack-dev-server --mode development" 
//cnpm start

3. 不会生成dist文件
//在出口配置
publicPath:"/dist/" 虚拟的路径可以访问到生成的文件

5.source map

//配置文件
"devtool":"source-map"

//会生成两个文件 
         main.js   
  映射文件 main.js.map  //映射源代码目录 方便调试

loaders配置

1.处理css的loader

 cnpm install style-loader css-loader node-sass postcss-loader --save
 
 
 
//webpack.config.js
module:{
    rules:[
        {
            test:/.css$/,
            loader:'style-loader!css-loader'
        //凡是以css结尾的文件 都要经过css-loader style-loader 处理 （!为连接符）
        }
    ]
}

2.处理js的loader

cnpm install babel-loader @babel/core @babel/preser-env @babel/preset-react --save

//ES6?=>?ES5   解决ES6兼容问题

//webpack.config.js
module:{
   rules:[
       {
           test:/.js$/,
           exclude:/node_modules/,//排除文件夹
           loader:'babel-loader',
           query:{
               presets:[es2015]
           }
       }
   ]
}

3.处理css兼容的loader

cnpm i --save postcss-loader?autoprefixer?postcss

//webpack.config.js
module:{
    rules:[
        {
            test:/.css$/,
            loader:'style-loader!css-loader!postcss-loader',
        }
    ]
}

//新建postcss.config.js配置文件
module.exports = {
    plugins: [
        require('autoprefixer')('last 100 versions' )
        require('autoprefixer')(
            { browsers: 
                [
                    'last 10 Chrome versions',
                    'last 5 Firefox versions', 
                    'Safari >= 6', 
                    'ie> 8',
                    'ios >= 8',
                    'android >= 4.4'
                ] 
            }
        )
    ]
}

4.处理图片的loader

 cnpm install url-loader file-loader -D
?/* file-loader?,?url-loader?(文件?copy??到目标文件夹)
(url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于
file-loader，而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少请求次数。) */

5.vue-loader

//解析vue
cnpm i --save vue-loader?vue-template-compiler

//配置文件
 { test: /.vue$/, use: 'vue-loader' }   -->插件

插件

 const  {VueLoaderPlugin} = require("vue-loader")

    plugins: [
        new VueLoaderPlugin()
    ]

参考配置文件

module.exports?={
 ?entry:?{
 ?index:__dirname?+?"/src/index.js"
 ?},
 ?output:?{
 ?path:?__dirname?+?"/dist",?//打包后的文件存放的地方
 ?filename:?"[name].bundle.js",//打包后输出文件的文件名
 ?publicPath:"/dist/"?//webpack?output?is?served?from
 ?},

 ?devServer:?{
 ?contentBase:?"./",?//content?not?from?webpack?is?serverd
 ?port:?'8080',
 ?inline:?true//实时刷新
 ?},

 ?devtool:?'source‐map',

 ?module:{
 ?rules:[
 ?{
 ?test:?/.css$/,
 ?loader:?'style‐loader!css‐loader'//添加对样式表的处理,内联样式
 ?//loader:?'style‐loader!css‐loader!postcss‐loader'
 ?},
 ?{
 ?test:/.js$/,?//随便起的test?名字
 ?exclude:?/node_modules/,?//排除一个
 ?//?exclude:?/(node_modules|src)/,?//*****排除多个怎么写？？？
 ?loader:'babel‐loader',
 ?query:{
 ?presets:['es2015']
 ?}
 ?},

 ?//npm?install?‐‐save‐dev?sass‐loader
 ?//因为sass‐loader依赖于node‐sass，所以还要安装node‐sass
?//?npm?install?‐‐save‐dev?node‐sass