在命令行中输入,来安装webpack。[假设已经安装了node]
npm install webpack@3.6.0 -gwebpack.config.js用来配置打包路径:
module.exports={ entry: './src/main.js' ,output: { path: './dist' ,filename: 'bundle.js' } } 使用如上命令 初始化webpack的使用。使用 webpack 命令打包构建:
PS A:\vuestudy\vue\vue-629> webpack Hash: 0bd4f09244f0e8c60354 Version: webpack 3.6.0 Time: 61ms Asset Size Chunks Chunk Names bundle.js 2.47 kB 0 [emitted] main [0] ./src/main.js 0 bytes {0} [built]进行下载项目依赖node_modles相关模块
npm install 使用cssloader来打包css文件，因为当前我们只能打包构建js文件。
下载安装;
//将css打包到dist 选这个就行了 npm install --save-dev css-loader //将javascript转为typescripy npm install --save-dev ts-loader导包：
const path = require('path') module.exports={ entry: './src/main.js' ,output: { path: path.resolve(__dirname,'dist') ,filename: 'bundle.js' } , module: { rules: [ { test: /\.css$/, use: 'css-loader' } // { test: /\.ts$/, use: 'ts-loader' } ] } }打包css。
npm run build在安装了css-loader后，我们继续来安装打包css的style-loader
npm install --save-dev style-loader然后再webpack.config.js中配置:
{ "name": "webpackuse", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "build":"webpack" }, "author": "", "license": "ISC", "devDependencies": { "css-loader": "^3.6.0", "style-loader": "^1.2.1" } }然后接下来，使用npm run build .
在index.js中引入css，css文件代码如下:
body{ margin:0 auto; background:red; /* background: url("../img/a.jpg"); */ }发现成功将css构建到bundle.js中，接下来，看浏览器变化
已经变红。
修改图片打包命名格式:
options: { name: '[path][name].[ext]', },配置好后，webpack.config.js代码如下:
const path = require('path') module.exports={ entry: './src/main.js' ,output: { path: path.resolve(__dirname,'dist') ,filename: 'bundle.js' ,publicPath: 'dist/' } , module: { rules: [ { test: /\.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' } ] }, // { // test: /\.(png|jpg|gif)$/i, // use: [ // { // loader: 'url-loader', // options: { // limit: 819200, // }, // }, // ], // }, { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', }, ], }, ] } }使用npm run build构建后如下:
浏览器显示如下:
发现图片能够正常加载.
配置babel插件:
官方babel-loader 网址:babel-loader
使用如下命令:
npm install -D babel-loader @babel/core @babel/preset-envenv是环境(enivronment)的意思。
然后配置webpack.config.js，如下：
{ test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }个人完整配置代码如下：
const path = require('path') module.exports={ entry: './src/main.js' ,output: { path: path.resolve(__dirname,'dist') ,filename: 'bundle.js' ,publicPath: 'dist/' } ,resolve: { alias: { 'vue$':'vue/dist/vue.esm.js' } } , module: { rules: [ { test: /\.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' } ] }, { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', }, ], }, { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] } }配置好babel后，使用npm run build进行构建:
可以从bundle.js中看到，已经看不到const等es6语法的关键字，全部转化为var了。
安装后，简单试用下vue,在main.js中使用：
require('./css/index.css') import Vue from 'vue' const app = new Vue({ el:'#calc' ,data:{ test: '我在main.js中调用vue' } })在index.html中配置div:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>webpack模块化使用vue测试</title> </head> <body> <div id="calc"> {{test}} </div> </body> </html> <script src="./dist/bundle.js"> </script>使用npm run build重新构建，打开 可以看到，已经能够使用模块化思想来进行使用vue。
