webpack,vue

webpack打包逻辑，配置，如何识别内部命令，原始只识别js，非js静态资源需要通过loader进行额外配置

 

npm install安装webpack vue vue-loader css-loader vue-template-compiler style-loader file-loader url-loader webpack-dev-server

 

vue 文件 <template <script <stlye 这种只是一个组件，内部存在不同样式，无法直接在浏览器中运行，没法挂载,这种文件类型也需要被loader

 

webpack.config.js 用于配置，打包资源的，通过http请求加载的内容

const path = require()

module.exports={

target:'web',

entry:path.join(_dirname,'src/index.js') //路径添加，绝对路径

output:{

filename:xxx

path:xxx

}

moudle:{

rules:[

{test:/\.vue$/,loader:'vue-loader' //通过vue-loader为.vue文件处理文件类型内部}，

{test:/\.css/,use:['style-loader','css-loader']},

{test:/\..styl/,use:['style-loader','css-loader','stylus-loader']},

每一个loader只关注自己范围内的内容

{test:/\.(gif|jpg|jpeg|png|svg)&/,use:[{loader:'url-loader',options:{limit:1024,name:[name]-aaa.[ext]}//通过options，指定loader的操作方式, //ext是扩展名}]}

]}}

//非js内容都需要进行处理，如上

 

注意区分不同的webpack，有全局的和自己设置的.需要在package.json 下，scripts下的build中进行更改，使系统默认进入我们自行设置的webpack配置中，而不是使用全局的

"scripts":{

"build":"webpack --config webpack.config.js",

"dev":"webpack-dev-server --config webpack.config.js",

}

文件入口文件 index.js

//挂载组件

 

import Vue from 'vue'

import App from './app.vue'

 

//进行展示和挂载

const root = document.createElement('div')

document.body.appendChild(root)

 

//新建vue

new Vue({

render:(h)=>h(App)

}).$mount(root)

 

webpack内存在很多js内部依赖的文件

css预处理器

test-stylus-styl文件