webpack个人学习笔记

最新推荐文章于 2024-07-11 23:13:51 发布

swt_hand

最新推荐文章于 2024-07-11 23:13:51 发布

阅读量88

点赞数

分类专栏：前端 vue 文章标签： webpack

本文链接：https://blog.csdn.net/swt_hand/article/details/102734922

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

0 篇文章 0 订阅

订阅专栏

安装webpack

npm install webpack@3.6.0   //安装到全局
npm install webpack@3.6.0 --save-dev  //安装到当前目录下

安装loader

npm install css-loader@2.0.2 --save-dev
npm install style-loader@0.23.1 --save-dev
npm install --save-dev less-loader@4.1.0 less@3.9.0
npm install --save-dev url-loader@1.1.2
npm install --save-dev file-loader
npm install babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1 //es6转es5

//template1

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

import Vue from 'vue'

const app = new Vue({
    el:'#app',
    template:`
    <div><h2>{{message}}</h2></div>
    `,
    data:{
        message:'hello world'
    }
})

template2

const APP = {
    template:`<div><h2>{{message}}</h2></div>`,
    data(){
        return{
            message:'hello world'
        }
    }
}


const app = new Vue({
    el:'#app',
    template:'<APP/>',
    components:{
        APP
    }
})

template3

//名为app.js的文件
export default{
        template:`<div><h2>{{message}}</h2></div>`,
        data(){
            return{
                message:'hello world'
            }
        }
}

import APP from './js/app'


const app = new Vue({
    el:'#app',
    template:'<APP/>',
    components:{
        APP
    }
})

template4

//安装vue-loader vue-template-compiler

npm install vue-loader@13.0.0 vue-template-compiler@2.5.21 --save-dev

//app.vue

<template>
    <div class="message"><h2>{{message}}</h2></div>
</template>

<script>
export default {
    name:'app',
     data(){
            return{
                message:'hello world'
            }
        }

}
</script>

<style scoped>
 .message{
     color: green
 }
</style>

//js中引入
import APP from './vue/app.vue'

const app = new Vue({
    el:'#app',
    template:'<APP/>',
    components:{
        APP
    }
})

//配置loader

{
    test:/\.vue$/,
        use: ['vue-loader']
          }

plugins

添加版权

const webpack = require('webpack')

      plugins: [
        new webpack.BannerPlugin('最终版权归wcy所有')
      ]

htmlwebpackplugin

安装插件

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

在webpack.config.js中配置

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

      plugins: [
        new webpack.BannerPlugin('最终版权归wcy所有'),
        new htmlwebpackplugin(
          {
            template:'index.html'  // 根据index生成
          }
        )
      ]

压缩js插件

// 安装插件
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev


//配置

const uglifyjs = require('uglifyjs-webpack-plugin')
      plugins: [
        new webpack.BannerPlugin('最终版权归wcy所有'),
        new htmlwebpackplugin(
          {
            template:'index.html'
          }
        ),
        new uglifyjs()  // new 对象
      ]

搭建本地服务器

//安装插件
 npm install webpack-dev-server@2.9.3 --save-dev
 
 //配置

module.exports = {
      devServer: {
        contentBase: './dist',
        inline: true
      }
}
//package.json配置
  "scripts": {
    "dev": "webpack-dev-server --open"
  }

//执行
npm run dev

配置文件分离

//安装
npm install webpack-merge@4.1.5 --save-dev

//配置
const webpackMerge = require('webpack-merge');


module.exports = webpackMerge(baseconfig, { 
    plugins: [
      new uglifyjs()
    ]
})

swt_hand

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack个人学习笔记

安装webpacknpm install webpack@3.6.0 //安装到全局npm install webpack@3.6.0 --save-dev //安装到当前目录下安装loadernpm install css-loader@2.0.2 --save-devnpm install style-loader@0.23.1 --save-devnpm install ...
复制链接

扫一扫