零基础资料复习 webpack的信息在文档里面都可以看到很清晰
webpack配置-出入口基础
01建webpack.config.js
02终端 npm init
03终端 npm install
04在webpack.config.js里面书写代码
例如输出为:./dist/bundle.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
webpack的less-loader的配置
1在入口文件引入less文件
require('./css/specila.less')
2安装less 和 less-loader
例如:npm install less less-loader --save-dev
3将 loader 添加到 webpack 的配置中去
module.exports=
{module:{
rules:[{test:/\.less$/i,loader:[// compiles Less to CSS"style-loader","css-loader","less-loader",],},],},};
webpack的vue配置
1,在main.js里面输入代码
import Vue from 'vue'
const app = new Vue({
el: "#app",
data: {
message: 'Hello Webpack'
}})
2在index.html里面输入代码
<div id="app">
<h2>{{message}}</h2>
</div>
3终端安装
npm install vue --save
4修改配置
resolve: {
alias: { 'vue$': 'vue/dist/vue.esm.js' }
},