webpack 学习

Posted 2020-10-28 高中国流

https://segmentfault.com/a/1190000006178770

这篇文章很好 看他的吧

const path = require(‘path‘);
module.exports={
    //入口文件的配置项
    entry:{
        entry:‘./src/entry.js‘
    },
    //出口文件的配置项
    output:{
       //打包的路径文职
        path:path.resolve(__dirname,‘dist‘),
        //打包的文件名称
        filename:‘bundle.js‘
    },
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

服务和热更新
npm install webpack-dev-server --save-dev 

devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,‘dist‘),
        //服务器的IP地址，可以使用IP也可以使用localhost
        host:‘localhost‘,
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:1717
    }
模块：CSS文件打包
style-loader  css-loader
module:{
        rules: [
            {
              test: /\.css$/,
              use: [ ‘style-loader‘, ‘css-loader‘ ]
            }
          ]
    },

插件配置：配置JS压缩
uglifyjs-webpack-plugin

const uglify = require(‘uglifyjs-webpack-plugin‘);


plugins:[
        new uglify()
    ],

打包html文件
	
const htmlPlugin= require(‘html-webpack-plugin‘);
new htmlPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:‘./src/index.html‘
           
        })

CSS中的图片处理

file-loader、url-loader

CSS分离:extract-text-webpack-plugin

const extractTextPlugin = require("extract-text-webpack-plugin");

Plugins：
    new extractTextPlugin("/css/index.css")

处理HTML中的图片

html-withimg-loader

loader:
    {
    test: /\.(htm|html)$/i,
     use:[ ‘html-withimg-loader‘] 
}

自动处理CSS3属性前缀

postcss-loader
1
npm install --save-dev postcss-loader autoprefixer

给webpack增加babel支持
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

loader:
    {
    test:/\.(jsx|js)$/,
    use:{
        loader:‘babel-loader‘,
        options:{
            presets:[
                "es2015","react"
            ]
        }
    },
    exclude:/node_modules/
}
.babelrc文件配置

{
    "presets":["react","es2015"]
}


哎  自己不会写博客  别人也可不了  给自己留个回忆吧