webpack安装和基本使用(个人记录)

最新推荐文章于 2023-05-04 22:57:28 发布

吕招焕

最新推荐文章于 2023-05-04 22:57:28 发布

阅读量223

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/u011090104/article/details/104706594

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

webpack安装和基本使用

安装：npm install webpack@2.4.1 -g
打包：webpack ./main.js build.js

body

<body>
    <div id="app"></div>
    <script src="./build.js"></script>
</body>

main.js

import Vue from './vue.js'

console.log(num1);
import App from './App.js'
new Vue({
    el:'#app',
    components:{
        App
    },
    template:'<App />'
})

App.js

var app = {
    template:`
        <div>我是入口组件</div>
    `
}
export default app;

webpack.config.js 监听

module.exports={
    entry:{   //这是入口 可以有多个
        "main":"./main.js"
    },
    output:{
        filename:'./build.js'
    },
    watch:true
}

css loader

//先创建一个.css文件 然后引入到main.js 最后在webpack.config.js加入module对象  
    module:{
        loaders:[
            {
                //style-loader css-loader
                //遇到后缀为.css的文件 , webpack先用css-loader加载器去解析这个文件
                   //最后计算完成的css，用style-loader生成解析好的css
                   //webpack在打包时遇到后缀为css的文件就会使用style-loader和css-loader

                test:/\.css/,
                loaders:'style-loader!css-loader'
            }
        ]
    }

图片文件的处理

   //在webpack.config.js module中引入
              	{
                test:/\.(jpg|png|jpeg|gif|svg)$/,
                loader:'url-loader?limit=50'
            	}

App.js

import imgSrc from './link.jpg'

var app = {
    data(){
        return{
            imgSrc:imgSrc
        }
    },
    template:`
        <div>
        我是入口组件
        <img :src='imgSrc'></img>
        </div>
    `
}
export default app;

吕招焕

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack安装和基本使用(个人记录)

webpack安装和基本使用安装：npm install webpack@2.4.1 -g打包：webpack ./main.js build.jsbody<body> <div id="app"></div> <script src="./build.js"></script></body>ma...
复制链接

扫一扫