webpack3整理(第三节/满三节)
Posted 鱼樱、、
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack3整理(第三节/满三节)相关的知识,希望对你有一定的参考价值。
‘use strict‘
const path = require(‘path‘)
const utils = require(‘./utils‘)
const config = require(‘../config‘) //想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中
const vueLoaderConfig = require(‘./vue-loader.conf‘)
function resolve (dir) {
return path.join(__dirname, ‘..‘, dir)
}
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: ‘eslint-loader‘,
enforce: ‘pre‘, //// 标识应用这些规则,即使规则覆盖(高级选项)
include: [resolve(‘src‘), resolve(‘test‘)],
options: {
formatter: require(‘eslint-friendly-formatter‘),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
const webapckConfigs = {
//mode: "production", // "production" | "development" | "none"环境切换
context: path.resolve(__dirname, ‘../‘), //// webpack 的主目录
entry: { //entry属性来作为构建其内部依赖图的开始来指定一个入口起点(或多个入口起点)。默认值为 ./src
app: ‘./src/main.js‘
},
output: {//output属性告诉 webpack 在哪里输出它所创建的 bundles(包),以及如何命名这些文件,默认值为 ./dist
path: config.build.assetsRoot, //目标输出目录 path 的绝对路径其实就是dist文件夹下面。
filename: ‘[name].js‘, //ilename 用于输出文件的文件名。
publicPath: process.env.NODE_ENV === ‘production‘
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: [‘.js‘, ‘.vue‘, ‘.json‘], //此选项告诉解析器在解析中能够接受哪些扩展名
alias: { //模块别名列表,模块别名相对于当前上下文导入
‘vue$‘: ‘vue/dist/vue.esm.js‘,
‘@‘: resolve(‘src‘),
}
},
// plugins: [
// new webpack.ProvidePlugin({
// $: ‘webpack-zepto‘//引入zepto
// })
// new webpack.optimize.UglifyJsPlugin(),
// new htmlWebpackPlugin({template: ‘./src/index.html‘})
// ],
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/, //test属性用于标识出应该被对应的 loader 进行转换的某个或某些文件,use 属性,表示进行转换时,应该使用哪个 loader
loader: ‘vue-loader‘,
options: vueLoaderConfig
// test 和 include 具有相同的作用,都是必须匹配选项
// exclude 是必不匹配选项(优先于 test 和 include)
//尽量避免 exclude,更倾向于使用 include,在 include 和 exclude 中使用绝对路径数组
},
{
test: /\.js$/,
loader: ‘babel-loader‘,
include: [resolve(‘src‘), resolve(‘test‘), resolve(‘node_modules/webpack-dev-server/client‘)]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: ‘url-loader‘,
options: {
limit: 10000,
name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘)
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: ‘url-loader‘,
options: {
limit: 10000,
name: utils.assetsPath(‘media/[name].[hash:7].[ext]‘)
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: ‘url-loader‘,
options: {
limit: 10000,
name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]‘)
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it‘s native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: ‘empty‘,
fs: ‘empty‘,
net: ‘empty‘,
tls: ‘empty‘,
child_process: ‘empty‘
}
}
module.exports = webapckConfigs; //导出配置
以上是关于webpack3整理(第三节/满三节)的主要内容,如果未能解决你的问题,请参考以下文章