webpack4搭建项目以及vue模块化引入

webpack4 搭建项目 结合vue

//新建文件夹xxx

第一步

npm init // 创建package.json
npm i webpack
npm i webpack-cli //webpack4 必须单独安装webpack-cli
npm i webpack-dev-server

第二步

根目录下新建index.html

第三步

根目录下新建webpack.config.js

var path = require(‘path’);
var webpack = require(‘webpack’);

module.exports = {};

第四步

新建src文件夹，src文件夹下新建main.js
----node_modules
----src
----main.js
----index.html
----package-lock.json
----package.json
----webpack.config.js

第五步

src目录下新建一个utils.js

module.exports = function say() {
console.log(‘hello world’);
}

然后main.js里写

var say = require(’./util’);
say();

第六步

修改webpack.config.js

var path = require(‘path’);
var webpack = require(‘webpack’);

module.exports = {
entry: ‘./src/main.js’, // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包
output: {
path: path.resolve(__dirname, ‘./dist’), // 项目的打包文件路径
publicPath: ‘/dist/’, // 通过devServer访问路径
filename: ‘build.js’ // 打包后的文件名
},
devServer: {
historyApiFallback: true,
overlay: true
}
};

然后package.json文件中添加

“scripts”: {
“dev”: “webpack-dev-server --open --hot”,
“build”: “webpack --progress --hide-modules”
},

第七步

修改index.html,引入打包后的文件

第八部

运行 npm run dev 浏览器会看见 hello world
我们随意修改util.js，可以发现浏览器会自动刷新

webpack默认不支持转码es6，但是import export这两个语法却单独支持。所以我们可以改写前面的模块化写法

改写util.js

export default function say() {
console.log('hello world ');
}

改写main.js

import say from ‘./util’;
say();

第九步

引入vue

main.js

import Vue from ‘vue’;

var app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue!’
}
});

index.html

{{message}}

修改webpack.config.js

var path = require(‘path’);
var webpack = require(‘webpack’);

module.exports = {
entry: ‘./src/main.js’,
output: {
path: path.resolve(__dirname, ‘./dist’),
publicPath: ‘/dist/’,
filename: ‘build.js’
},
devServer: {
historyApiFallback: true,
overlay: true
},
resolve: {
alias: {
‘vue$’: ‘vue/dist/vue.esm.js’
}
}
};

重新运行 npm run dev

第十步

引入scss和css

npm i node-sass css-loader vue-style-loader sass-loader --save-dev

webpack.config.js

var path = require(‘path’);
var webpack = require(‘webpack’);

module.exports = {
entry: ‘./src/main.js’,
output: {
path: path.resolve(__dirname, ‘./dist’),
publicPath: ‘/dist/’,
filename: ‘build.js’
},
devServer: {
historyApiFallback: true,
overlay: true
},
resolve: {
alias: {
'vueKaTeX parse error: Expected 'EOF', got '}' at position 34: …sm.js' }̲ }, mod…/, // 匹配后缀名为css的文件
use: [
‘vue-style-loader’,
‘css-loader’
],
}
]
}
};

引入scss的配置

module: {
rules: [
{
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 111: … ], }̲, { …/,
use: [
‘vue-style-loader’,
‘css-loader’,
‘sass-loader’
],
},
{
test: /.sass$/,
use: [
‘vue-style-loader’,
‘css-loader’,
‘sass-loader?indentedSyntax’
],
}]
}

第十一步

使用babel转码

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: ‘babel-loader’,
options: {
presets: [’@babel/preset-env’]
}
}
}
]
}

*使用async await语法

npm install --save babel-polyfill

entry: [‘babel-polyfill’, ‘./src/main.js’],

util.js

export default function getData() {
return new Promise((resolve, reject) => {
resolve(‘ok’);
})
}

main.js

import getData from ‘./util’;
import Vue from ‘vue’;

import ‘./style/common.scss’;

var app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue!’
},
methods: {
async fetchData() {
const data = await getData();
this.message = data;
}
},
created() {
this.fetchData();
}
});

引入图片资源

npm i file-loader --save-dev

webpack.config.js添加一个loader

{
test: /.(png|jpg|gif|svg)$/,
loader: ‘file-loader’,
options: {
name: ‘[name].[ext]?[hash]’
}
}

在src目录下新建一个img目录，存放一张图片logo.png

修改main.js

import getData from ‘./util’;
import Vue from ‘vue’;

import ‘./style/common.scss’;

Vue.component(‘my-component’, {
template: ‘’,
data() {
return {
url: require(’./img/logo.png’)
}
}
})

var app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue !’
},
methods: {
async fetchData() {
const data = await getData();
this.message = data;
}
},
created() {
this.fetchData()
}
});

修改index.html

{{message}}

单文件组建

在前面的例子里，我们使用 Vue.component 来定义全局组件
在实际项目里，更推荐使用单文件组件

npm i vue-loader vue-template-compiler --save-dev

在webpack.config.js文件添加

const { VueLoaderPlugin } = require (‘vue-loader’)

plugins: [ new VueLoaderPlugin()],

然后添加loader

{
test: /.vue$/,
loader: ‘vue-loader’,
options: {
loaders: {
‘scss’: [
‘vue-style-loader’,
‘css-loader’,
‘sass-loader’
],
‘sass’: [
‘vue-style-loader’,
‘css-loader’,
‘sass-loader?indentedSyntax’
]
}
}
}

在src目录下新建一个App.vue

{{ msg }}

在main.js文件

import Vue from ‘vue’;
import App from ‘./App.vue’;

import ‘./style/common.scss’;

new Vue({
el: ‘#app’,
template: ‘’,
components: { App }
})

在index.html文件

然后npm run dev

source-map调试代码

webpack.config.js里添加

module.exports = {
devtool: ‘#eval-source-map’
};

webpack3 对打包文件进行压缩，缓存，分离等等优化处理

npm i cross-env --save-dev

修改package.json

“scripts”: {
“dev”: “cross-env NODE_ENV=development webpack-dev-server --open --hot”,
“build”: “cross-env NODE_ENV=production webpack --progress --hide-modules”
}
这次我们设置了环境变量，打包时，NODE_ENV是production

然后修改webpack.config.js，判断NODE_ENV为production时，压缩js代码

var path = require(‘path’);
var webpack = require(‘webpack’);

module.exports = {
// 省略…
}

if (process.env.NODE_ENV === ‘production’) {
module.exports.devtool = ‘#source-map’;
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
‘process.env’: {
NODE_ENV: ‘“production”’
}
}),
new webpack.optimize.UglifyJsPlugin(),
])
}