初次使用webpack打包vue,没有用vue-cli搭建手脚架。开始时要安装很多npm包,以下是package.json文件
{
"name": "v1",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --hot --inline "
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.5.17"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"css-loader": "^1.0.0",
"expose-loader": "^0.7.5",
"file-loader": "^1.1.11",
"handlebars-loader": "^1.7.0",
"jquery": "^3.3.1",
"popper.js": "^1.14.4",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"vue-loader": "^14.2.2",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.17",
"webpack": "^3.0.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^2.2.0"
}
}
**注意事项**vue-loader、webpack、webpack-dev-server不要使用最新版,会解析不了vue文件,我开始全部安装的最新版,之后解析不了报错。
新建一个文件,文件名为webpack.config.js里面配置webpack的一些信息。
var webpack = require('webpack');
var path = require('path');
var fs = require('fs')
function resolve(dir)
{
return fs.realpathSync(__dirname+'/'+dir)
}
module.exports = {
entry: "./main.js",
output: {
path: __dirname,
filename: "build.js"
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},{
test : /\.(png|jpg|gif)$/,
loader : 'url-loader',
},{
test : /\.css$/,
loader : 'style-loader!css-loader'
},{
test : /\.scss$/,
loader : 'style-loader!css-loader'
},{
test : /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader : 'url-loader'
},{
test : /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader : 'url-loader'
},{
test : /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader : 'file-loader'
},{
test : /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader : 'url-loader'
},{
test : /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader : "file-loader"
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Popper: ['popper.js', 'default'],
})
],
resolve: {
alias: {
vue$: "vue/dist/vue"
}
}
};
要使用babel需要新建一个文件,名称为.babelrc,里面代码如下
{
"presets": ["env"]
}
在main.js中写下
import './static/css/bootstrap.css'
或者不写这句代码,在页面引用即可
就可以使用bootstrap的样式了
jquery的使用方法不变