美文网首页
webpack使用

webpack使用

作者: Wo信你个鬼 | 来源:发表于2019-05-15 12:46 被阅读0次

    各位大老们好，可能写的不够完美，欢迎各位大老在评论下留言。。。

    webpack的官网：

    https://www.webpackjs.com/guides/installation/

    全局安装 webpack 、webpack-cli 、webpack-dev-server

    cnpm i webpack webpack-cli webpack-dev-server -g

    查看版本

    webpack -v

    生成package.json

    npm init

    默认所有

    npm init -y

    创建项目目录

    新建目录src dist目录
    在src中新建index.js
    在dist中新建index.html

    打包

    webpack

    修改打包命令，最后执行命令npm run serve

    注：mode：表示命令是生产还是开发命令

    production生产模式
    development 开发模式

    微信图片_20190515114030.png

    前端自己手动配置webpack

    --------------------------------1.修改配置文件--------------------------------------

    修改配置文件webpack.config.js

    //引入相关配置
const path = require('path');

module.exports = {
    //入口文件
    entry:{
        main:"./src/main.js",
        index:"./src/index.js"
    },
    //多个出口文件
    output:{
        path:path.resolve(__dirname,'../dist'),
        filename:"[name].js"//打包的文件名字
    }
}

    修改配置文件package.json

    {
  "name": "2019-05-15-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
//打包
    "serve": "webpack --config=config/webpack.config.js --mode=production"
  },
  "author": "",
  "license": "ISC"
}

    执行命令npm run server

    ---------------------------------------2.配置本地-------------------------------------

    配置本地webpack.config.js

    //引入相关配置
const path = require('path');

module.exports = {
    //入口文件
    entry:{
        main:"./src/main.js",
        index:"./src/index.js"
    },
    //多个出口文件
    output:{
        path:path.resolve(__dirname,'../dist'),
        filename:"[name].js"//打包的文件名字
    },
//------------------------------此次是配置本地--------------------------------------------
    //配置本地
    devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'../dist'),
        //设置服务ip地址
        host:"localhost",
        //服务压缩是否开启
        compress:true,
        //配置服务端口号
        port:8080
    }
}

    package.json

    {
  "name": "2019-05-15-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
//本地
    "start":"webpack-dev-server --config=config/webpack.config.js --mode=development",
//打包
    "serve": "webpack --config=config/webpack.config.js --mode=production"
  },
  "author": "",
  "license": "ISC"
}

    执行命令npm run start

    -------------------------------------3.配置本地自动更新安装-------------------------

    配置本地自动更新安装

    npm install webpack --save-dev

    webpack.config.js

    //引入相关配置
const path = require('path');
const webpack = require('webpack');

module.exports = {
    //入口文件
    entry:{
        main:"./src/main.js",
        index:"./src/index.js"
    },
    //多个出口文件
    output:{
        path:path.resolve(__dirname,'../dist'),
        filename:"[name].js"//打包的文件名字
    },
//------------------------------此次是更新--------------------------------------------   
    plugins:[
    //更新
    new webpack.HotModuleReplacementPlugin()
    ],
    //配置本地
    devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'../dist'),
        //设置服务ip地址
        host:"localhost",
        //更新
        inline:true,
        //服务压缩是否开启
        compress:true,
        //配置服务端口号
        port:8080
    }
}

    package.json

    {
  "name": "2019-05-15-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
//本地
    "start": "webpack-dev-server --config=config/webpack.config.js --mode=development",
//打包
    "serve": "webpack --config=config/webpack.config.js --mode=production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.31.0"
  }
}

    执行命令npm run start

    -------------------------------------4.打包HTML----------------------------------

    打包HTML

    安装打包HTML

    npm install html-webpack-plugin --save-dev

    webpack.config.js

    //引入相关配置
const path = require('path');
const webpack = require('webpack');
const htmlPlugin = require('html-webpack-plugin');

module.exports = {
    //入口文件
    entry:{
        main:"./src/main.js",
        index:"./src/index.js"
    },
    //多个出口文件
    output:{
        path:path.resolve(__dirname,'../dist'),
        filename:"[name].js"//打包的文件名字
    },
    
    plugins:[
    //更新
    new webpack.HotModuleReplacementPlugin(),
//------------------------------此次是HTML--------------------------------------------
    //html
    new htmlPlugin({
        minify:{
            removeAttributeQuotes:true
        },
        hash:true,
        template:"./src/index.html"
    })
    ],
    //配置本地
    devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'../src'),
        //监听热更新src文件
        watchContentBase:true,
        //设置服务ip地址
        host:"localhost",
        //更新
        hot:true,
        inline:true,
        //服务压缩是否开启
        compress:true,
        //配置服务端口号
        port:8080
    }
}

    package.json

    {
  "name": "2019-05-15-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
//本地
    "start": "webpack-dev-server --config=config/webpack.config.js --mode=development --open",
//打包
    "serve": "webpack --config=config/webpack.config.js --mode=production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.31.0"
  }
}

    执行命令npm run server
    热更新执行本地npm run start

    ----------------------------------5.打包css-----------------------------

    打包css

    安装css

    npm install style-loader css-loader --save-dev

    在index.js引入css

    import css from './css/index.css'

    webpack.config.js

    //引入相关配置文件
const path = require('path');
const webpack = require('webpack');
const htmlPlugin = require('html-webpack-plugin');

module.exports = {
    //入口文件
    entry:{
        main:"./src/main.js",
        index:"./src/index.js"
    },
    //多个出口文件
    output:{
        path:path.resolve(__dirname,'../dist'),
        filename:"[name].js"//打包的文件名字
    },
//------------------------------此次是Css--------------------------------------------
    //css
    module:{
        rules:[{
            test:/\.css$/,
            use:[
                {loader:"style-loader"},
                {loader:"css-loader"}
            ]
        }]
    },
    plugins:[
    //更新
    new webpack.HotModuleReplacementPlugin(),
    //html
    new htmlPlugin({
        minify:{
            removeAttributeQuotes:true
        },
        hash:true,
        template:"./src/index.html"
    })
    ],
    //配置本地
    devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'../src'),
        //监听更新src文件
        watchContentBase:true,
        //设置服务ip地址
        host:"localhost",
        //更新
        hot:true,
        inline:true,
        //服务压缩是否开启
        compress:true,
        //配置服务端口号
        port:8080
    }
}

    package.json

    {
  "name": "2019-05-15-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
//本地
    "start": "webpack-dev-server --config=config/webpack.config.js --mode=development --open",
//打包
    "serve": "webpack --config=config/webpack.config.js --mode=production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.31.0"
  }
}

    执行命令npm run serve

    结构目录如下：

    微信图片_20190515175750.png

    --------------------------------------------打包vue-------------------------------------------

    打包vue

    安装

    1.安装package.json

    npm init -y

    -y 代表默认

    2.安装vue

    npm install vue vue-loader --save-dev

    3安装模板

    npm i vue-template-compiler --save-dev

    4.安装HTML

    npm i html-webpack-plugin --save-dev

    5.安装css，sass

    npm i css-loader node-sass style-loader sass-loader vue-style-loader -D

    -D == --save-dev

    6.安装图片压缩

    npm install imagemin-webpack-plugin --save-dev

    7.安装glob

    npm install glob --save-dev

    App.vue

    <template>
    <div id="app">
        <h1 class="title">{{msg}}</h1>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: "hello world"
            }
        }
    }
</script>

<style lang="scss" scoped>
    #app {
        .title {
            color: red;
        }
    }
</style>

    index.html

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

    index.js

    //入口文件
import vue from "vue";
import App from "./App.vue";
new vue({
    el:"#app",
    render:h=>h(App)
})

    webpack.config.js

    //引入相关配置文件
const vuePlugin = require("vue-loader/lib/plugin");
const htmlPlugin = require('html-webpack-plugin');
const imgPlugin = require('imagemin-webpack-plugin').default;
const glob = require("glob")

module.exports = {
    mode: "production",
    module: {
        rules: [{//vue
            test: /\.vue$/,
            loader: "vue-loader"
        }, {//css
            test: /\.css$/,
            use: [
                "vue-style-loader",
                "css-loader"
            ]
        }, {//scss
            test: /\.scss$/,
            use: [
                "vue-style-loader",
                "css-loader",
                "sass-loader"
            ]
        }]
    },
    plugins: [
        new vuePlugin(),
        //html
        new htmlPlugin({
            minify: {
                removeAttributeQuotes: true
            },
            hash: true,
            template: "./src/index.html"
        }),
        //压缩图片
        new imgPlugin({
            externalImages: {
                context: 'src', // Important! This tells the plugin where to "base" the paths at
                sources: glob.sync('src/img/**/*.png'),
                destination: 'dist',
                fileName: '[path][name].[ext]' // (filePath) => filePath.replace('jpg', 'webp') is also possible
            }
        })
    ]
}

    目录结构如下：

    微信图片_20190515184740.png

    相关文章

      网友评论

          本文标题：webpack使用

          本文链接：https://www.haomeiwen.com/subject/mobuaqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|webpack使用|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！