对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:“./app/entry”,
// 数组
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]五种变量
filename: ‘zhou.js'//单个文件
filename:‘[name]wang.js’;//多个文件
filename:‘[id]wang.js’
filename: ‘[name].[hash].bundle.js’
filename:'[chunkhash].yes.js'//20位hash值
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 //压缩
}