zoukankan      html  css  js  c++  java
  • webpack配置

    /前提是下载了插件
    1、初始化项目
    npm init -y
    2、安装webpack
    cnpm install webpack-cli -D
    3、创建src文件,创建dist文件(在webpackproject根目录下)
     
    4、创建webpack.config.js文件(在webpackproject根目录下)
     
    5、在src中创建入口文件 main.js
     
    6、初始打包
    npx webpack
     
    7、安装解析JS的babel文件
    cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
     
    8、安装解析CSS的loader文件
    cnpm install --save-dev style-loader css-loader sass-loader node-sass
     
    9、安装html插件
    cnpm install -D html-webpack-plugin
     
    10、安装处理图片的loader
    cnpm install url-loader file-loader -D
     
    11、安装处理vue的文件loader
    cnpm install -D vue-loader vue-template-compiler
     
    12、安装vue/js
    cnpm install vue -S
     
    13、安装服务器环境
    cnpm install webpack-dev-server -D
     
     
     在webpack.config.js中配置
    const path = require("path");
    const htmlWebpackPlugin = require("html-webpack-plugin");
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
     
    //定义入口文件路径及出口文件路径
    const PATH = {
    dev:path.join(__dirname,"./src/main.js"),
    build:path.join(__dirname,"./dist")
    }
     
    //webpack的配置
    module.exports = {
    mode:'development',
    //入口配置
    entry:{
    app:PATH.dev
    },
    //出口配置
    output:{
    filename:"[name].js",
    path:PATH.build
    },
    //配置loader 将浏览器不识别的一些语法转换为浏览器识别的一些语法
    module:{
    //规则
    rules:[
    {
    test:/.(js)$/,
    use:{
    loader:"babel-loader",
    options:{
    presets:["@babel/env"]
    }
    }
    },
    {
    test:/.(css|scss)$/,
    //css loader执行的顺序 从右到左 从下到上
    use:["style-loader","css-loader","sass-loader"]
    },
    {
    /*
    当图片的大小小于2048的时候用url-loader做解析
    大于2048的时候用file-loader做解析 系统会自动去找file-loader
     
    url-loader:解析的时候会解析成base64的形式
    file-loader会解析成原本的形式
    */
    test:/.(jpg|png|gif)$/,
    use:{
    loader:"url-loader",
    options:{
    limit:2048
    }
    }
    },
    {
    test:/.(woff|svg|eot|ttf|woff2)$/,
    use:["url-loader"]
    },
    {
    test:/.vue$/,
    loader:"vue-loader"
    }
    ]
    },
    plugins:[
    new htmlWebpackPlugin({
    filename:"index.html",
    template:"index.html",
    title:"Vue"
    }),
    new VueLoaderPlugin()
    ],
      devServer: {
            contentBase: path.join(__dirname, "dist"), // 静态文件输出地址
            compress: true, // 一切服务都启用gzip 压缩
            port: 9000 // 端口号
            }
    }
     
     
     
  • 相关阅读:
    168. Excel Sheet Column Title
    171. Excel Sheet Column Number
    264. Ugly Number II java solutions
    152. Maximum Product Subarray java solutions
    309. Best Time to Buy and Sell Stock with Cooldown java solutions
    120. Triangle java solutions
    300. Longest Increasing Subsequence java solutions
    63. Unique Paths II java solutions
    221. Maximal Square java solutions
    279. Perfect Squares java solutions
  • 原文地址:https://www.cnblogs.com/BySee1423/p/12502502.html
Copyright © 2011-2022 走看看