webpack学习

webpack学习

 

1.项目目录结构

 

 

 

2.打包的出口文件和入口文件

// 在webpack.config.js中配置如下

const path = require('path')

module.exports = {

    // 打包环境的配置
    mode: 'development'
    // 主入口文件  
    entry: './src/main.js'   

    output: {
        
        // 出口文件的文件夹
        path: path.resolve(__dirname, 'dist'),
        
        // 出口文件
        filename: 'build.js',
            
        // js文件出口的域名
        publicPath: '/
    }             
}

 

3.提供默认的html模板

// 提供自己的html模板，如果自己不提供的话，就会使用webpack默认提供的

// 使用插件html-webpack-plugin来配置

npm i html-webpack-plugin -D

// 在webpack.config.js中使用插件

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

    plugins: [
        
        new HtmlWebpackPlugin({

            // 配置自定义的模板，指定路径
            template: 'public/index.html'
        }),
    ]
}

 

4.每次打包的时候删除掉上一次的打包

// 在webpack.config.js中使用 clean-webpack-plugin 插件

npm i clean-webpack-plugin -D

const { CleanWebpackPlugin  } = require('clean-webpack-plugin')

module.exports = {

    plugins: [

        new CleanWebpackPlugin()
    ]
}

 

5.静态资源的loader的使用

// 我们使用的css文件，或者图片格式的是不能正常解析出来的，需要使用webpack的loader的处理，注意loader的解析是从右像左解析


// 处理css文件，安装 style-loader 和 css-loader

npm i style-loader css-loader -D

// webpack.config.js中使用

module.exports = {

    module: {
    
        rules: [

            {
    
                test: /\.css$/,
                  
                // 先使用css-loader，再使用style-loader
                use: ['style-loader', 'css-loader']
            },

            {

                 test: /\.less$/,
                  
                // 如果使用less，需要安装 less 和 less-loader
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
}
    

 

6.给打包的css样式加上前缀或者使用外链形式引入

// 打包之后使用外链的形式引入

// 在webpack中使用 mini-css-extract-plugin 插件，可以外链引入

npm i mini-css-extract-plugin autoprefixer  -D

// 使用 autoprefixer 插件可以给css样式加上浏览器的前缀，但是需要安装 postcss-loader，然后创建 postcss.config.js文件中配置 autoprefixer 插件

module.exports = {
    plugins: [require('autoprefixer')]
}

// 然后在package.json文件中设置

"browserslist": [
    "last 10 versions",
    ">1%",
    "ios 7"
],


const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {

    module: {

        rules: [

            {
                test: /\.css$/,

                // 在需要外链的文件上加上 MiniCssExtractPlugin.loader
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']

            },
        ]
    }

    plugins: [

        new MiniCssExtractPlugin({
            
            // 需要打包出来的css文件，然后会自动外链进去
            filename: 'main.css'
        })
    ]
}    

 

7.开启一个服务实现实时打包

// 安装 webpack-dev-server 插件

npm i webpack-dev-server 

// 在webpack.config.js中配置

devServer: {
        contentBase: './dist',
        // 执行npm start开启服务的时候自动打开浏览器
        open: true,
        port: 8080,
},

// 然后在package.json文件中设置命令

"scripts": {

    // 设置这个命令启动
    "start": "webpack-dev-server",
    "serve": "nodemon server.js",
    "build": "webpack"
},

 

8.压缩打包后的css和js

// 安装 optimize-css-assets-webpack-plugin 插件

npm i optimize-css-assets-webpack-plugin -D

// 在webpack.config.js中配置

const Optimize = require('optimize-css-assets-webpack-plugin')

// 压缩js安装 uglifyjs-webpack-plugin 插件

npm i uglifyjs-webpack-plugin -D

const Uglifyjs = require('uglifyjs-webpack-plugin')

module.exports = {

    plugins: [

        new Optimize({
            
            cssProcessor: require('cssnano'), //引入cssnano配置压缩选项
            cssProcessorOptions: { 

                discardComments: { removeAll: true } 
            },
            canPrint: true //是否将插件信息打印到控制台
        }),

        new Uglifyjs()
    ]
}