0
点赞
收藏
分享

微信扫一扫

对webpack从零配置

一.新建配置文件,文件名一般为webpack.config.js;

二.配置文件目录,一般为根目录,一般会放在./build文件夹下

三.配置文件格式一般为module.exports={},

四.结构如下:

module.exports = {
entry: "...",
output: {... },
module: {
rules: [
{...},
{...},
],
},
resolve: {
modules: [
"node_modules",
path.resolve(__dirname, "app")
],
extensions: [".js", ".json", ".jsx", ".css"],
alias: {...},
},
performance: {... },
devtool: "source-map",
context: __dirname,
target: "web",
externals: ["react", /^@angular\//],
stats: "errors-only",
devServer: { ... },
plugins: [ ... ],
}

1.入口文件和上下文

module.exports = {
// 上下文是查找入口文件的基本目录,是一个绝对值,所以要用到path.resolve
// 如果不设,默认为当前目录
// 与命令行中的webpack --context是一样的
// 最后入口文件是 context+entry
//可以写成./today/wang[前面➕./],不能写成/today/wang,如果../表示在当前目录再往上一层
// context 除了这里的入口文件用到,loader,。plugin都会要用到这个值
context:path.resolve(__dirname,'./today/wang'),// entry可以为字符串|对象|数组三种形式
// 如果底层有封装那么后面的js可以省略
// 字符串
// 数组
entry:["./homne.js","./about.js",]//对象
entry:{
home:‘./home.js’,
about:'./about.js',
contact:'./contact.js'
}
}

2.输出

module.exports={
output:{

//最后生成的打包文件所在的目录,是一个绝对值,如果不指定,表示当前目录

           //如果文件夹不存在,会自动创建
path:path.resolve(__dirname,'../dist/'),
//filename中可以使用[name],[id],[hash],[chunkhash][query]五种变量
hashDigestLength:8//指定最后chunkhash和、hash生成字符串的长度,默认是20个字符
}
}

3。模块 modules
module:{
rules:[
{

test:/\.vue$/,
loader:'vue-loader'
options:vueLoaderConfig
}
]
}
4.resolve

resolve: {
extensions: ['.js', '.vue', '.json'], //扩展名为.js,.vue,.json的可以忽略,如 import App from './app',先在当前目录中找app.js,没有再找app.vue,没找到,再找.json,如果还没找到,报错
alias: {
'vue$': 'vue/dist/vue.esm.js', // 别名,这是一个正则的写法,表示以vue结尾的,如import Vue from 'vue' 表示 import Vue from 'vue/dist/vue.esm.js'
'@': path.resolve('src'),// 这也是为懒人服务的,import HelloWorld from '@/components/HelloWorld'这里的@其实就是代表src这个目录
'#': path.resolve('src/ui/components') import Table from '#/table'
}
},

5.开发服务器

evServer: {
//progress只在命令行用,不在配置文件中配
contentBase: path.resolve(__dirname, "../dist/"), //网站的根目录为 根目录/dist,如果没有指定,使用process.cwd()函数取当前工作目录,工作目录>npm run dev
port: 8080, //端口改为9000
open:true, // 自动打开浏览器
//index:'front.html', // 与HtmlWebpackPlugin中配置filename一样
inline:true, // 默认为true, 意思是,在打包时会注入一段代码到最后的js文件中,用来监视页面的改动而自动刷新页面,当为false时,网页自动刷新的模式是iframe,也就是将模板页放在一个frame中
hot:false,
publicPath: '/static456/',它与output.publicPath的值应该是一样的,值为上面contentBase目录的子目录,是放js,css,图片等资源的文件夹,记得打包时,将图片等拷贝或打包到该文件下
compress:true //压缩
}



 



举报

相关推荐

0 条评论