本站资源全部免费,回复即可查看下载地址!
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
简介webpakc的定位实际上是打包器.而不是任务执行器. 当然也可以配合grunt进行使用. webpack也提供了便捷的打包流程,项目构建,插件管理等等. 为了更好的构建项目从开发到生产都一一提供了解决方案. Vue官方也推荐使用的vue-loader也是基于webpack的. 因此这里简单介绍一下webpack的使用一些总结.更详细细致的内容可以到官网进行拓展. 安装局部安装使用命令行的安装方式 : npminstall--save-devwebpack
我们可以写到配置文件当中package.json,对应的目录中然后再执行npm install
[HTML] 纯文本查看 复制代码 {
"name": "XXXX",
"version": "1.0.0",
"description": "XXX",
"author": "XXX",
"private": true,
"scripts": {//指定执行命令
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"watch":"webpack --watch",
"build": "webpack --config webpack.prod.js",//也可以进行自定义
"debug": "nodemon build/build.js"
},
"dependencies": {
"swiper": "^4.0.7",
"vue": "^2.5.2",
"vue-router": "^2.8.1",
"element-ui": "2.2.1"
},
"devDependencies": {
}
}
全局安装npm install --global webpack
工程结构我们可以根据项目的实际的情况设置目录.
一般情况下可以设置为源码目录,生产目录. 我们可以将webpack配置文件与package.json放入到项目的根目录. webpack配置文件
[HTML] 纯文本查看 复制代码 const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
目录结构如下: 1.webpack-demo 2.|- package.json 3.|- webpack.config.js 4.|- /dist 5.|- bundle.js 6.|- index.html 7.|- /src 8. /src|- index.js 9.|- /node_modules 资源管理这里先简单介绍下CSS资源的管理配置. 安装loader,loader的作用就是将文件进行处理(编译,压缩). [HTML] 纯文本查看 复制代码 1.npm install --save-dev style-loader css-loader
module.exports =
{
module: {
rules: [
{
test: /\.css$/, //指定匹配文件,使用style-loader,css-loader
use: [
'style-loader',
'css-loader'
]
}]
}
}
输出管理输出管理的目的是为了更好的简化工作.
我们可以使用插件,输出js名字更替等 webpack当中有许多的插件我么可以将其进行更替. 这边先简单介绍两个插件 生成html的插件,清除目录的插件. npm install clean-webpack-plugin--save-dev npm install --save-dev html-webpack-plugin
整个配置文件,注意插件的配置顺序.
[HTML] 纯文本查看 复制代码 const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
new CleanWebpackPlugin(['dist']),//清除dist目录
new HtmlWebpackPlugin({ //生成一个html页面指定其title,然后会自动将js文件生成引入js代码
title: 'Output Management'
})
],
output: {
//publicPath:XXX 可以资金定义路径,build后输出的内容将会放入到这个路径当中
filename: '[name].bundle.js', //注意name用方括号括起来,name的值对应的为entry的key值,这样为了区分多个文件
path: path.resolve(__dirname, 'dist')
}
};
开发工具 webpack 最强大的是开发提供的开发工具 webpack-server 提供了访问页面的服务 webpack-watch 提供了观察文件的变化 webpack-dev-middleware webpack-server内部也是采用了该方法,不仅如此,也提供了其它的自定义的功能很强大.
[HTML] 纯文本查看 复制代码 const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
devtool: 'inline-source-map',
//devServer: {
// contentBase: './dist'
//},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'//middleware会用到该路径,url访问的路径
}
};
|